diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-001.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-001.md new file mode 100644 index 00000000000..737056e9343 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-001.md @@ -0,0 +1,33 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9de +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. + +First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. + +# --hints-- + +test-text + +```js +assert(//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-002.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-002.md new file mode 100644 index 00000000000..e69a56a6c39 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-002.md @@ -0,0 +1,43 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9df +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. + +# --hints-- + +test-text + +```js +assert( + /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( + code + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + + + + + + + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-003.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-003.md new file mode 100644 index 00000000000..4060dac9f7c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-003.md @@ -0,0 +1,51 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e0 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the head, add a `title` of `D3 Dashboard`. + +# --hints-- + +test-text + +```js +assert( + /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-004.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-004.md new file mode 100644 index 00000000000..92d0e9e6672 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-004.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e1 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. + +# --hints-- + +test-text + +```js +const link = code.match(/]>/gi)[0]; +assert( + /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && + /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-005.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-005.md new file mode 100644 index 00000000000..126ee1afb77 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-005.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e2 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. + +# --hints-- + +test-text + +```js +assert($('div.dashboard').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-006.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-006.md new file mode 100644 index 00000000000..8d2dc0f0fc2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-006.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-007.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-007.md new file mode 100644 index 00000000000..9c9637a79da --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-007.md @@ -0,0 +1,66 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('width') === '980px' && dashboard.css('height') === '500px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-008.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-008.md new file mode 100644 index 00000000000..f30f2278512 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-008.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e5 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('background-color') === 'rgb(255, 255, 255)' && + dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-009.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-009.md new file mode 100644 index 00000000000..a9e92dd79e5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-009.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e6 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. + +# --hints-- + +test-text + +```js +const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; +assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-010.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-010.md new file mode 100644 index 00000000000..a5ebf98f5a0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-010.md @@ -0,0 +1,75 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e7 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give the container some space by adding a `padding` of `100px 10px` to the `body` element. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-011.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-011.md new file mode 100644 index 00000000000..e852c01758e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-011.md @@ -0,0 +1,81 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e8 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('display') === 'flex' && + dashboard.css('align-items') === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-012.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-012.md new file mode 100644 index 00000000000..c087db365e8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-012.md @@ -0,0 +1,79 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e9 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[0]; +assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-013.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-013.md new file mode 100644 index 00000000000..1900674079c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-013.md @@ -0,0 +1,96 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ea +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. + +This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[1]; +assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-014.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-014.md new file mode 100644 index 00000000000..934305ffeb0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-014.md @@ -0,0 +1,95 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9eb +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[2]; +assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-015.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-015.md new file mode 100644 index 00000000000..6972bb06c2a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-015.md @@ -0,0 +1,103 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ec +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. + +In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. + +The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. + +# --hints-- + +test-text + +```js +assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-016.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-016.md new file mode 100644 index 00000000000..c518fc0fd82 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-016.md @@ -0,0 +1,108 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ed +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. + +# --hints-- + +test-text + +```js +assert( + twitterColor === '#7cd9d1' && + tumblrColor === '#f6dd71' && + instagramColor === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-017.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-017.md new file mode 100644 index 00000000000..8537b5c634a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-017.md @@ -0,0 +1,113 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ee +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: + +```js +const variableName = d3.select('.className') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('.dashboard')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-018.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-018.md new file mode 100644 index 00000000000..e034d250e57 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-018.md @@ -0,0 +1,117 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ef +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: + +```js +const variableName = d3.select('selectedElement') + .append('elementToAdd') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('svg')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-019.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-019.md new file mode 100644 index 00000000000..71a9b118ed1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-019.md @@ -0,0 +1,124 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. + +`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: + +```js +const variableName = d3.select('element') + .append('element') + .attr('attribute', 'value') +``` + +Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.width.value === '700'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-020.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-020.md new file mode 100644 index 00000000000..64d86709ab6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-020.md @@ -0,0 +1,116 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f1 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.height.value === '500'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-021.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-021.md new file mode 100644 index 00000000000..06bcb3f2432 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-021.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f2 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. + +Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. + +# --hints-- + +test-text + +```js +assert( + typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-022.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-022.md new file mode 100644 index 00000000000..20a021de05d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-022.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. + +# --hints-- + +test-text + +```js +const domain = yScale.domain(); +assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-023.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-023.md new file mode 100644 index 00000000000..e7a769694bf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-023.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. + +Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. + +Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. + +# --hints-- + +test-text + +```js +const range = yScale.range(); +assert(range.length === 2 && range[0] === 430 && range[1] === 70); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-024.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-024.md new file mode 100644 index 00000000000..bfb5cb47cf4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-024.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f5 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. + +# --hints-- + +test-text + +```js +assert( + typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-025.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-025.md new file mode 100644 index 00000000000..0ad79254818 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-025.md @@ -0,0 +1,131 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. + +# --hints-- + +test-text + +```js +const domain = xScale.domain(); +assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-026.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-026.md new file mode 100644 index 00000000000..c2eda71b4f8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-026.md @@ -0,0 +1,133 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f7 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. + +# --hints-- + +test-text + +```js +const range = xScale.range(); +assert(range.length === 2 && range[0] === 70 && range[1] === 630); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-027.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-027.md new file mode 100644 index 00000000000..fadf8788314 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-027.md @@ -0,0 +1,138 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f8 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. + +# --hints-- + +test-text + +```js +assert( + typeof yAxis === 'function' && + /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-028.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-028.md new file mode 100644 index 00000000000..3c6e36d9cc2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-028.md @@ -0,0 +1,142 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f9 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. + +# --hints-- + +test-text + +```js +assert( + typeof xAxis === 'function' && + /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-029.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-029.md new file mode 100644 index 00000000000..aae1810fbf7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-029.md @@ -0,0 +1,143 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fa +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". + +# --hints-- + +test-text + +```js +assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-030.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-030.md new file mode 100644 index 00000000000..5a8d4514367 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-030.md @@ -0,0 +1,147 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fb +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. + +# --hints-- + +test-text + +```js +assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-031.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-031.md new file mode 100644 index 00000000000..94721751a99 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fc +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. + +Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-032.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-032.md new file mode 100644 index 00000000000..1482a45c496 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-032.md @@ -0,0 +1,150 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fd +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-033.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-033.md new file mode 100644 index 00000000000..838f00a1e26 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-033.md @@ -0,0 +1,153 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fe +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 13); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-034.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-034.md new file mode 100644 index 00000000000..ffd84f411a9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-034.md @@ -0,0 +1,156 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ff +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 22); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-035.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-035.md new file mode 100644 index 00000000000..e5afa9d8688 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-035.md @@ -0,0 +1,158 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca00 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. + +# --hints-- + +test-text + +```js +assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-036.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-036.md new file mode 100644 index 00000000000..61a26b75fff --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-036.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca01 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: + +```js +.selectAll('element') +``` + +# --hints-- + +test-text + +```js +assert( + /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-037.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-037.md new file mode 100644 index 00000000000..194e3ad318c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-037.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca02 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.transform === 'translate(-12px) rotate(-50deg)' || + index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-038.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-038.md new file mode 100644 index 00000000000..b17ce9013b1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-038.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca03 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => index.style['text-anchor'] === 'end' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-039.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-039.md new file mode 100644 index 00000000000..2025374c7a1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-039.md @@ -0,0 +1,173 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca04 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. + +You will add some hover effects later, so the pointer will make for a better experience. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.cursor === 'pointer' && index.style.font === '10px verdana' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-040.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-040.md new file mode 100644 index 00000000000..52d9a027fd4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-040.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca05 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. + +The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert( + ticks[0].innerHTML === '0k' && + ticks[1].innerHTML === '1k' && + ticks[2].innerHTML === '2k' && + ticks[3].innerHTML === '3k' && + ticks[4].innerHTML === '4k' && + ticks[5].innerHTML === '5k' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-041.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-041.md new file mode 100644 index 00000000000..82a3261d9b5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-041.md @@ -0,0 +1,171 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca06 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-042.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-042.md new file mode 100644 index 00000000000..aa8a37baf20 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-042.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca07 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. + +# --hints-- + +test-text + +```js +assert( + /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-043.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-043.md new file mode 100644 index 00000000000..a91e12f41e6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-043.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca08 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. + +# --hints-- + +test-text + +```js +assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-044.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-044.md new file mode 100644 index 00000000000..5a93e72d48f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-044.md @@ -0,0 +1,192 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca09 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: + +```js +.x(d => d.year) +``` + +You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). + +This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. + +# --hints-- + +test-text + +```js +assert( + /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-045.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-045.md new file mode 100644 index 00000000000..e07ef7245ce --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0a +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. + +In the "d function" you created, return `xScale(d.year)` instead of `d.year`. + +# --hints-- + +test-text + +```js +assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-046.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-046.md new file mode 100644 index 00000000000..9ba6b01ac8e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-046.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0b +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. + +This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. + +These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-047.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-047.md new file mode 100644 index 00000000000..27b6eb3229d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-047.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0c +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 3 && + /lineGraph\.append\((`|'|")path\1\)/gi.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-048.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-048.md new file mode 100644 index 00000000000..0af7e8110d7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0d +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. + +Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". + +After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. + +# --hints-- + +test-text + +```js +assert($('svg path')[2].getAttribute('d').length === 151); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-049.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-049.md new file mode 100644 index 00000000000..880f7b5d0a6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0e +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const twitterPath = $('svg path')[2]; +assert( + twitterPath.getAttribute('stroke') === '#7cd9d1' && + twitterPath.getAttribute('stroke-width') == '3' && + twitterPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-050.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-050.md new file mode 100644 index 00000000000..21584d84adf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-050.md @@ -0,0 +1,198 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0f +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. + +# --hints-- + +test-text + +```js +assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-051.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-051.md new file mode 100644 index 00000000000..3c1c0750188 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-051.md @@ -0,0 +1,204 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca10 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculate their values just like you did for the Twitter line. + +# --hints-- + +test-text + +```js +assert( + /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-052.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-052.md new file mode 100644 index 00000000000..74a4638e890 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca11 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculate their values just like you did for the Twitter line. + +The x values for each line will be the same, but the y values will use the data from the different platforms. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-053.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-053.md new file mode 100644 index 00000000000..746e1ab4b1a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-053.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca12 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 4 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-054.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-054.md new file mode 100644 index 00000000000..695da3fee70 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-054.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca13 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. + +# --hints-- + +test-text + +```js +assert($('svg path')[3].getAttribute('d').length === 115); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-055.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-055.md new file mode 100644 index 00000000000..a200a166f95 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-055.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca14 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const tumblrPath = $('svg path')[3]; +assert( + tumblrPath.getAttribute('stroke') === '#f6dd71' && + tumblrPath.getAttribute('stroke-width') == '3' && + tumblrPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-056.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-056.md new file mode 100644 index 00000000000..c4f75859463 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-056.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca15 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. + +# --hints-- + +test-text + +```js +assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-057.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-057.md new file mode 100644 index 00000000000..59e2b7b22ca --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-057.md @@ -0,0 +1,226 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca16 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Appropriately set the `x` values for `instagramLine` like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-058.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-058.md new file mode 100644 index 00000000000..ad99613e2db --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-058.md @@ -0,0 +1,229 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca17 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-059.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-059.md new file mode 100644 index 00000000000..fe46511da37 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-059.md @@ -0,0 +1,231 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca18 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 5 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-060.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-060.md new file mode 100644 index 00000000000..5863f052f3d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-060.md @@ -0,0 +1,230 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca19 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. + +# --hints-- + +test-text + +```js +assert($('svg path')[4].getAttribute('d').length === 171); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-061.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-061.md new file mode 100644 index 00000000000..45e97e2ba69 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-061.md @@ -0,0 +1,239 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1a +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. + +# --hints-- + +test-text + +```js +const instagramPath = $('svg path')[4]; +assert( + instagramPath.getAttribute('stroke') === '#fd9b98' && + instagramPath.getAttribute('stroke-width') == '3' && + instagramPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-062.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-062.md new file mode 100644 index 00000000000..82eef8d81e7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-062.md @@ -0,0 +1,247 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1b +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: + +```js +lineGraph.selectAll('twitter-circles') +``` + +`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-063.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-063.md new file mode 100644 index 00000000000..942bc905877 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-063.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1c +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Add the D3 `data` function to your selection and pass it the data array like this: + +```js +.data(data) +``` + +# --hints-- + +test-text + +```js +assert(/\.data\s*\(\s*data\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-064.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-064.md new file mode 100644 index 00000000000..db5343e098f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-064.md @@ -0,0 +1,248 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1d +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Next, chain the `enter()` function to the selection. + +The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. + +In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. + +# --hints-- + +test-text + +```js +assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-065.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-065.md new file mode 100644 index 00000000000..609632232b4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-065.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1e +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-066.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-066.md new file mode 100644 index 00000000000..d5291b996da --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-066.md @@ -0,0 +1,250 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. + +Use the `attr` function to set the `cx` to `d => xScale(d.year)`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cx') == '70'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-067.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-067.md new file mode 100644 index 00000000000..f8b852ac2b8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-067.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca20 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. + +As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cy') == '243.232'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-068.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-068.md new file mode 100644 index 00000000000..ad9dfcf5dfc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-068.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca21 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('r') == '6'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-069.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-069.md new file mode 100644 index 00000000000..9d2d9c5b0b0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-069.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca22 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[0].getAttribute('fill') === 'white' && + $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-070.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-070.md new file mode 100644 index 00000000000..e8beb17a75b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-070.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca23 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-071.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-071.md new file mode 100644 index 00000000000..25b5c92d036 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-071.md @@ -0,0 +1,263 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca24 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-072.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-072.md new file mode 100644 index 00000000000..b5eee1874d9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-072.md @@ -0,0 +1,268 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca25 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. + +Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 18); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-073.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-073.md new file mode 100644 index 00000000000..4d3a27e49d0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-073.md @@ -0,0 +1,274 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca26 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('cx') == '70' && + $('svg circle')[9].getAttribute('cy') == '401.128' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-074.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-074.md new file mode 100644 index 00000000000..df1221f436d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-074.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca27 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('r') == '6' && + $('svg circle')[9].getAttribute('fill') === 'white' && + $('svg circle')[9].getAttribute('stroke') === '#f6dd71' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-075.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-075.md new file mode 100644 index 00000000000..53c158898b0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-075.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca28 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Set the `cursor` to `pointer` using the `style` function. + +# --hints-- + +test-text + +```js +assert($('svg circle')[9].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-076.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-076.md new file mode 100644 index 00000000000..dfef7440d25 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-076.md @@ -0,0 +1,287 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca29 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-077.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-077.md new file mode 100644 index 00000000000..5ed00425a75 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-077.md @@ -0,0 +1,288 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2a +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 27); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-078.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-078.md new file mode 100644 index 00000000000..fea82b1f06f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-078.md @@ -0,0 +1,296 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2b +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Appropriately set the `cx` and `cy` attributes for the Instagram circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('cx') == '70' && + $('svg circle')[18].getAttribute('cy') == '424.024' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-079.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-079.md new file mode 100644 index 00000000000..36c953d0596 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-079.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2c +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('r') == '6' && + $('svg circle')[18].getAttribute('fill') === 'white' && + $('svg circle')[18].getAttribute('stroke') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-080.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-080.md new file mode 100644 index 00000000000..08a57df3f2f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-080.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2d +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Apply the appropriate `cursor` style for these circles. + +# --hints-- + +test-text + +```js +assert($('svg circle')[18].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-081.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-081.md new file mode 100644 index 00000000000..14ffc2dbaf6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-081.md @@ -0,0 +1,309 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. + +# --hints-- + +test-text + +```js +assert( + /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-082.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-082.md new file mode 100644 index 00000000000..ef8009859e8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-082.md @@ -0,0 +1,312 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2f +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. + +# --hints-- + +test-text + +```js +assert( + /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-083.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-083.md new file mode 100644 index 00000000000..43e8ea22992 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-083.md @@ -0,0 +1,315 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca30 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-084.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-084.md new file mode 100644 index 00000000000..1e01a5f30ff --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-084.md @@ -0,0 +1,318 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca31 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. + +# --hints-- + +test-text + +```js +assert( + $('svg')[1].getAttribute('width') == '200' && + $('svg')[1].getAttribute('height') == '200' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-085.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-085.md new file mode 100644 index 00000000000..33057ce9acc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-085.md @@ -0,0 +1,319 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca32 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-086.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-086.md new file mode 100644 index 00000000000..fc228825cc5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-086.md @@ -0,0 +1,324 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca33 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-087.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-087.md new file mode 100644 index 00000000000..bf1d3f754da --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-087.md @@ -0,0 +1,328 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca34 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-088.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-088.md new file mode 100644 index 00000000000..73bf1cd804a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-088.md @@ -0,0 +1,329 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca35 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. + +In this case, each platform of followers you have will map directly to a single color with nothing in between. + +# --hints-- + +test-text + +```js +assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-089.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-089.md new file mode 100644 index 00000000000..20900e45822 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-089.md @@ -0,0 +1,334 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca36 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. + +# --hints-- + +test-text + +```js +assert( + /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-090.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-090.md new file mode 100644 index 00000000000..a4a80c7f95d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-090.md @@ -0,0 +1,336 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca37 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. + +# --hints-- + +test-text + +```js +assert( + /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-091.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-091.md new file mode 100644 index 00000000000..8a4e9aab0a3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-091.md @@ -0,0 +1,335 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca38 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-092.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-092.md new file mode 100644 index 00000000000..84edb9a9490 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-092.md @@ -0,0 +1,344 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca39 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. + +In a few steps, you will make an array out of your data variable that will be passed to this function. + +# --hints-- + +test-text + +```js +assert( + /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-093.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-093.md new file mode 100644 index 00000000000..781851c9440 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-093.md @@ -0,0 +1,345 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3a +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-094.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-094.md new file mode 100644 index 00000000000..58dc3df6029 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-094.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3b +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-095.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-095.md new file mode 100644 index 00000000000..857d79ad14b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-095.md @@ -0,0 +1,367 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3c +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: + +```js +d3.entries(data[8].followers)) +``` + +The array it builds looks like this: + +```js +[ + { key: 'twitter', value: 2845 }, + { key: 'tumblr', value: 2040 }, + { key: 'instagram', value: 4801 } +] +``` + +This is where the `value` comes from in your `pie` variable. + +Add the `d3.entries` function as your `pie` argument. Use it to create the above array. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-096.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-096.md new file mode 100644 index 00000000000..19400c8460f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-096.md @@ -0,0 +1,350 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. + +# --hints-- + +test-text + +```js +assert( + /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-097.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-097.md new file mode 100644 index 00000000000..b94dc14b7b7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-097.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3e +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Use `append` to add three `g` elements for the pie. + +# --hints-- + +test-text + +```js +assert($('svg g').length === 20); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-098.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-098.md new file mode 100644 index 00000000000..8b1e882f741 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-098.md @@ -0,0 +1,351 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3f +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-099.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-099.md new file mode 100644 index 00000000000..7c2fdc874d7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-099.md @@ -0,0 +1,352 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca40 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. + +# --hints-- + +test-text + +```js +assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-100.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-100.md new file mode 100644 index 00000000000..ff80e8cbead --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-100.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca41 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. + +Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g')[0].getAttribute('transform'); +assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-101.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-101.md new file mode 100644 index 00000000000..69a67b1c697 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-101.md @@ -0,0 +1,377 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca42 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('fill') === '#7cd9d1' && + pathsArr[1].getAttribute('fill') === '#f6dd71' && + pathsArr[2].getAttribute('fill') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-102.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-102.md new file mode 100644 index 00000000000..c35673b4338 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-102.md @@ -0,0 +1,364 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca43 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Next, set the `stroke` to `white` and the `stroke-width` to `2`. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('stroke') === 'white' && + pathsArr[0].getAttribute('stroke-width') == 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-103.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-103.md new file mode 100644 index 00000000000..b4d01a98916 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-103.md @@ -0,0 +1,365 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca44 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-104.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-104.md new file mode 100644 index 00000000000..f3f23bf2a8c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-104.md @@ -0,0 +1,381 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca47 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: + +```js +.text(d => { + +}) +``` + +The method for getting the percent of each slice will take a few steps: + +1. Find the total number of followers for the displayed year +2. Divide the followers of a single platform by that total +3. Turn it into a string to display + +# --hints-- + +test-text + +```js +assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-105.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-105.md new file mode 100644 index 00000000000..7dd7bc8f459 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-105.md @@ -0,0 +1,383 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca48 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: + +```js +d3.values(data[8].followers) +``` + +It will be an array with the values of the followers for the three platforms in 2020. + +Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. + +# --hints-- + +test-text + +```js +assert( + /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-106.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-106.md new file mode 100644 index 00000000000..1e304f5fbb6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-106.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca49 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. + +# --hints-- + +test-text + +```js +assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-107.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-107.md new file mode 100644 index 00000000000..9fcc056c466 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-107.md @@ -0,0 +1,376 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4a +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-108.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-108.md new file mode 100644 index 00000000000..124a7abec7e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-108.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4b +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: + +```js +${Math.round(percent * 100)}% +``` + +Don't forget that you need a `return` statement here since you aren't using an implicit return. + +# --hints-- + +test-text + +```js +assert( + /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-109.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-109.md new file mode 100644 index 00000000000..de9a3090429 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-109.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4c +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` + +The `centroid` function will find the midpoint of each slice for each text element. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g text')[0] + .getAttribute('transform') + .replace('translate(', '') + .replace(')', '') + .split(','); +assert(transform[0] < 39 && transform[1] > 31); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-110.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-110.md new file mode 100644 index 00000000000..cfe05994783 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-110.md @@ -0,0 +1,389 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4d +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. + +After that, set the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +const text = $('.dashboard div svg g text')[0]; +assert( + text.style.textAnchor === 'middle' && + text.style.font.toLowerCase() === '10px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-111.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-111.md new file mode 100644 index 00000000000..5a6cda0ba57 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-111.md @@ -0,0 +1,391 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-112.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-112.md new file mode 100644 index 00000000000..be844c9e21c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-112.md @@ -0,0 +1,394 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the table a `width` of `200` and a `height` of `120` using `attr`. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert( + table.getAttribute('width') == 200 && table.getAttribute('height') == 120 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-113.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-113.md new file mode 100644 index 00000000000..439b742b887 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-113.md @@ -0,0 +1,396 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca50 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Set the `font` to `12px verdana` using the `style` function. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-114.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-114.md new file mode 100644 index 00000000000..1be90df8df5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-114.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca51 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-115.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-115.md new file mode 100644 index 00000000000..df269c6462c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-115.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca52 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-116.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-116.md new file mode 100644 index 00000000000..eb6c7d09187 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-116.md @@ -0,0 +1,404 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca53 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +Use the `text` function to set the text of the selection to `2020 followers`. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').text() === '2020 followers'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-117.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-117.md new file mode 100644 index 00000000000..7c19f3dcae6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-117.md @@ -0,0 +1,406 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca54 +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-118.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-118.md new file mode 100644 index 00000000000..0cfe9b5a70a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-118.md @@ -0,0 +1,412 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca55 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-119.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-119.md new file mode 100644 index 00000000000..bcdec5c5339 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-119.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca56 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +Add a `selectAll` function to the selection and pass it the string `tr`. + +# --hints-- + +test-text + +```js +assert( + /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-120.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-120.md new file mode 100644 index 00000000000..4ee832321fb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-120.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca57 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. + +# --hints-- + +test-text + +```js +assert( + /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-121.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-121.md new file mode 100644 index 00000000000..e03bdbdb791 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-121.md @@ -0,0 +1,418 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca58 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-122.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-122.md new file mode 100644 index 00000000000..ed855f5024f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-122.md @@ -0,0 +1,422 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca59 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-123.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-123.md new file mode 100644 index 00000000000..7c8fd63c36c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-123.md @@ -0,0 +1,426 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5a +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-124.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-124.md new file mode 100644 index 00000000000..721d4428093 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-124.md @@ -0,0 +1,431 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5b +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[0] + .getAttribute('align') + .toLowerCase() === 'right' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-125.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-125.md new file mode 100644 index 00000000000..565a8dc72fe --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-125.md @@ -0,0 +1,430 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5c +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-126.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-126.md new file mode 100644 index 00000000000..cb21e05cc6a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-126.md @@ -0,0 +1,437 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5d +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +Set the `align` attribute to `center`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[1] + .getAttribute('align') + .toLowerCase() === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-127.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-127.md new file mode 100644 index 00000000000..90544de2a70 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-127.md @@ -0,0 +1,435 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5e +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Append a `div` element to the selection. Each `div` will be a small square for each color. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td div').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-128.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-128.md new file mode 100644 index 00000000000..bd8711a89b8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-128.md @@ -0,0 +1,438 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5f +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +Set the `width` to `16px` and the `height` to `16px` using the `style` function. + +# --hints-- + +test-text + +```js +const div = $('.dashboard div table tbody tr td div')[0]; +assert(div.style.width == '16px' && div.style.height === '16px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-129.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-129.md new file mode 100644 index 00000000000..3c351a7399a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-129.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca60 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td div')[0].style.backgroundColor === + 'rgb(124, 217, 209)' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-130.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-130.md new file mode 100644 index 00000000000..bace7d9779c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-130.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca61 +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-131.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-131.md new file mode 100644 index 00000000000..e508369e164 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-131.md @@ -0,0 +1,446 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca62 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Set the `text` to a "d function" that returns the value(`d.value`) for each data point. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-132.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-132.md new file mode 100644 index 00000000000..d3f68fb936c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-132.md @@ -0,0 +1,450 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca63 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Set the `align` attribute to `left` for this selection. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[2] + .getAttribute('align') + .toLowerCase() === 'left' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-133.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-133.md new file mode 100644 index 00000000000..6fe0e8de953 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-133.md @@ -0,0 +1,448 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca64 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const th = $('.dashboard div table thead tr th')[0]; +assert(th.style.position === 'relative' && th.style.left === '20px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-134.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-134.md new file mode 100644 index 00000000000..03e36d189a6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-134.md @@ -0,0 +1,453 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca65 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert(table.style.position === 'relative' && table.style.top === '30px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-135.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-135.md new file mode 100644 index 00000000000..a6c4b6fb870 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-135.md @@ -0,0 +1,464 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca66 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const pieGraph = $('.dashboard div svg')[0]; +assert( + pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-136.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-136.md new file mode 100644 index 00000000000..139d0e87f65 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-136.md @@ -0,0 +1,476 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca67 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. + +Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. + +# --hints-- + +test-text + +```js +assert( + typeof drawDashboard === 'function' && + /<\/script>\s* + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-137.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-137.md new file mode 100644 index 00000000000..a690b7567e6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-137.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca68 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. + +Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: + +```js +array.findIndex(d => + // find the index where the year passed to + // drawDashboard equals the year of the array +) +``` + +After this, you will be able to use `data[index]` to get that item in the array. + +# --hints-- + +test-text + +```js +assert.match(code,/const index = data.findIndex\(\(?d\)? => (year === d\.year|d.year === year)\s*\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-138.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-138.md new file mode 100644 index 00000000000..054da5d15a2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-138.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6a +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. + +The five spots are: + +1. The `domain` for `pieColors`. +2. The `data` for `pieGraphData`. +3. The `text` for your pie slice text. +4. The `data` for your `legendRows`. + +# --hints-- + +test-text + +```js +assert( + !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-139.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-139.md new file mode 100644 index 00000000000..5630a5404bb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-139.md @@ -0,0 +1,482 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: + +```js +.on('mouseover', d => drawDashboard(d)) +``` + +So now, when you hover a label, the function will be called with the year that is being hovered. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\)\)/g + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-140.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-140.md new file mode 100644 index 00000000000..45fd59a633e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-140.md @@ -0,0 +1,477 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6c +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. + +Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. + +# --hints-- + +test-text + +```js +assert.match(code, /d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-141.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-141.md new file mode 100644 index 00000000000..0c9593756d7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-141.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6d +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Now when you hover a label, you can see the data for the different years. + +Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. + +To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. + +Here's a hint: + +```js +.style('font', d => d === year ? ) +``` + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg g text')).filter( + (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-142.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-142.md new file mode 100644 index 00000000000..bee3e7b5989 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-142.md @@ -0,0 +1,478 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6e +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/ +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-143.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-143.md new file mode 100644 index 00000000000..0cfeac007dc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-143.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6f +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg circle')).filter( + (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-144.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-144.md new file mode 100644 index 00000000000..97348bc5be8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-144.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca70 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. + +After that, you will be able hover any of the circles or year labels to get the information for that year. + +# --hints-- + +test-text + +```js +assert.equal( + code.match( + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/g + )?.length, 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-145.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-145.md new file mode 100644 index 00000000000..3bf1fb49e15 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-145.md @@ -0,0 +1,494 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca71 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. + +Then, all of the circles will get filled in for the currently displayed year. + +# --hints-- + +test-text + +```js +const circles = Object.values($('.dashboard svg circle')); +assert( + circles.filter( + (el) => + el.getAttribute && + (el.getAttribute('fill') === '#7cd9d1' || + el.getAttribute('fill') === '#f6dd71' || + el.getAttribute('fill') === '#fd9b98') + ).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-146.md b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-146.md new file mode 100644 index 00000000000..d9c3208306e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/d3-dashboard/step-146.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca72 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. + +That's it, your dashboard is finished! Don't forget to admire your hard work. + +# --hints-- + +test-text + +```js +assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-binary-search.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-binary-search.md new file mode 100644 index 00000000000..bd2e8306ee1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/algorithms/implement-binary-search.md @@ -0,0 +1,155 @@ +--- +id: 61abc7ebf3029b56226de5b6 +title: Implement Binary Search +challengeType: 1 +forumTopicId: 487618 +dashedName: implement-binary-search +--- + +# --description-- + +Binary search is an **O(log(n))** efficiency algorithm for searching a sorted array to find an element. It operates using the following steps: + +1. Find the middle `value` of a sorted array. If `value == target` return (found it!). +1. If middle `value < target`, search right half of array in next compare. +1. If middle `value > target`, search left half of array in next compare. + +As you can see, you are successively halving an array, which gives you the log(n) efficiency. For this challenge, we want you to show your work - how you got to the target value... the path you took! + +# --instructions-- + +Write a function `binarySearch` that implements the binary search algorithm on an array, returning the path you took (each middle value comparison) to find the target in an array. + +The function takes a sorted array of integers and a target value as input. It returns an array containing (in-order) the middle value you found at each halving of the original array until you found the target value. The target value should be the last element of the returned array. If value not is found, return the string `Value Not Found`. + +For example, `binarySearch([1,2,3,4,5,6,7], 5)` would return `[4,6,5]`. + +For this challenge, when halving, you MUST use `Math.floor()` when doing division: `Math.floor(x/2)`. This will give a consistent, testable path. + +**Note:** The following array will be used in tests: + +```js +const testArray = [ + 0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, + 23, 49, 70 +]; +``` + +# --hints-- + +`binarySearch` should be a function. + +```js +assert(typeof binarySearch == 'function'); +``` + +`binarySearch(testArray, 0)` should return `[13, 5, 2, 0]`. + +```js +assert.deepEqual(binarySearch(_testArray, 0), [13, 5, 2, 0]); +``` + +`binarySearch(testArray, 1)` should return `[13, 5, 2, 0, 1]`. + +```js +assert.deepEqual(binarySearch(_testArray, 1), [13, 5, 2, 0, 1]); +``` + + +`binarySearch(testArray, 2)` should return `[13, 5, 2]`. + +```js +assert.deepEqual(binarySearch(_testArray, 2), [13, 5, 2]); +``` + +`binarySearch(testArray, 6)` should return the string `Value Not Found`. + +```js +assert.strictEqual(binarySearch(_testArray, 6), 'Value Not Found'); +``` + +`binarySearch(testArray, 11)` should return `[13, 5, 10, 11]`. + +```js +assert.deepEqual(binarySearch(_testArray, 11), [13, 5, 10, 11]) +``` + +`binarySearch(testArray, 13)` should return `[13]`. + +```js +assert.deepEqual(binarySearch(_testArray, 13), [13]); +``` + +`binarySearch(testArray, 70)` should return `[13, 19, 22, 49, 70]`. + +```js +assert.deepEqual(binarySearch(_testArray, 70), [13, 19, 22, 49, 70]); +``` + +# --seed-- + +## --after-user-code-- + +```js +const _testArray = [ + 0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, + 23, 49, 70 +]; +``` + +## --seed-contents-- + +```js +function binarySearch(searchList, value) { + let arrayPath = []; + return arrayPath; +} +``` + + + +# --solutions-- + +```js +let binarySearch = (searchList, value) => { + let arrayPath = []; + + // set initial L - M - R + let left = 0; + let right = searchList.length - 1; + let middle = Math.floor(right / 2); + + // if first comparison finds value + if (searchList[middle] == value) { + arrayPath.push(searchList[middle]); + return arrayPath; + } + + while (searchList[middle] !== value) { + // add to output array + arrayPath.push(searchList[middle]); + + // not found + if (right < left) { + return 'Value Not Found'; + } + // value is in left or right portion of array + // update L - M - R + if (searchList[middle] > value) { + right = middle - 1; + middle = left + Math.floor((right - left) / 2); + } else { + left = middle + 1; + middle = left + Math.floor((right - left) / 2); + } + + // if found update output array and exit + if (searchList[middle] == value) { + arrayPath.push(searchList[middle]); + + break; + } + } + return arrayPath; +}; +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md new file mode 100644 index 00000000000..12d385f3107 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md @@ -0,0 +1,109 @@ +--- +id: 62a257659d0d1e2456f24ba2 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`. + +# --hints-- + +You should not have a `console.log("Hello World");` line in your code. + +```js +assert.notMatch(code, /console\.log\("Hello World"\);/); +``` + +Your `script` element should have a `src` attribute set to `./script.js`. + +```js +const script = document.querySelector("script[data-src$='script.js']"); +assert.exists(script); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md new file mode 100644 index 00000000000..af7153531cf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md @@ -0,0 +1,102 @@ +--- +id: 62a39f5a5790eb27c1e5d4bf +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your view has been switched to your new `script.js` file. Remember that you can use the tabs above to switch between files. + +Add your `console.log("Hello World");` line to this file, and see it appear in your console. + +# --hints-- + +You should have a `console.log("Hello World");` line in your code. + +```js +assert.match(code, /console\.log\("Hello World"\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md new file mode 100644 index 00000000000..b40d5f4cc30 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md @@ -0,0 +1,132 @@ +--- +id: 62a3a0a3c0a4b32915d26a6e +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Remove your `console.log("Hello World");` line to begin writing your project code. + +In JavaScript, a variable is used to hold a value. To use a variable, you must first declare it. For example, to declare a variable called `camperbot`, you would write: + +```js +var camperbot; +``` + +The `var` keyword tells JavaScript you are declaring a variable. Declare a variable called `xp`. + +# --hints-- + +You should not have a `console.log("Hello World");` line in your code. + +```js +assert.notMatch(code, /console\.log\("Hello World"\);/); +``` + +You should use the `var` keyword to declare your variable. + +```js +assert.match(code, /var/); +``` + +You should declare a variable named `xp`. + +```js +assert.match(code, /xp/); +``` + +You should not assign a value to your variable. + +```js +assert.notMatch(code, /var xp =/); +``` + +Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /var xp;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +console.log("Hello World"); +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md new file mode 100644 index 00000000000..7fb32406762 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md @@ -0,0 +1,112 @@ +--- +id: 62a3a488b24fb32b91155d56 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Variables can be assigned a value. When you do this while you declare it, this is called initialization. For example: + +```js +var camperbot = "Bot"; +``` + +This would initialize the `camperbot` variable with a value of `Bot`. Initialize your `xp` variable to have a value of `0`. + +# --hints-- + +`xp` should have a value of `0`. + +```js +assert.equal(xp, 0); +``` + +You should initialize the `xp` variable to `0`. Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /var\s+xp\s*=\s*0\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md new file mode 100644 index 00000000000..278aa0789fc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md @@ -0,0 +1,136 @@ +--- +id: 62a3a75d8466a12e009eff76 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Initialize another variable called `health` with a value of `100`, and a variable called `gold` with a value of `50`. + +# --hints-- + +You should use `var` to declare a variable called `health`. + +```js +assert.match(code, /var health/); +``` + +You should initialize a variable called `health` with a value of `100`. + +```js +assert.match(code, /var health\s?=\s?100/); +``` + +You should use `var` to declare a variable called `gold`. + +```js +assert.match(code, /var gold/); +``` + +You should initialize a variable called `gold` with a value of `50`. + +```js +assert.match(code, /var gold\s?=\s?50/); +``` + +`health` should have a value of `100`. + +```js +assert.equal(health, 100); +``` + +`gold` should have a value of `50`. + +```js +assert.equal(gold, 50); +``` + +`xp` should still have a value of `0`. + +```js +assert.equal(xp, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md new file mode 100644 index 00000000000..606fdeb799a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md @@ -0,0 +1,122 @@ +--- +id: 62a3a7e4f1060e2fc5ffb34b +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create another variable called `currentWeapon` and set it to 0. + +When a variable name has multiple words, the convention in JavaScript is to use what's called camelCase. The first word is lowercase, and the first letter of every following word is uppercase. + +# --hints-- + +You should use `var` to declare a variable called `currentWeapon`. + +```js +assert.match(code, /var currentweapon/i); +``` + +You should use camelCase to name your variable. + +```js +assert.match(code, /currentWeapon/); +``` + +Your `currentWeapon` variable should be set to `0`. + +```js +assert.equal(currentWeapon, 0); +``` + +You should initialize your variable to `0`. + +```js +assert.match(code, /var currentWeapon\s?=\s?0/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +var health = 100; +var gold = 50; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md new file mode 100644 index 00000000000..63ecefac153 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md @@ -0,0 +1,138 @@ +--- +id: 62a3b365f1cdeb33efc2502e +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. + +Change all of your `var` keywords to `let`. + +# --hints-- + +You should not have any `var` keywords in your code. + +```js +assert.notMatch(code, /var/); +``` + +You should use the `let` keyword to declare your `xp` variable. + +```js +assert.match(code, /let xp/); +``` + +You should use the `let` keyword to declare your `health` variable. + +```js +assert.match(code, /let health/); +``` + +You should use the `let` keyword to declare your `gold` variable. + +```js +assert.match(code, /let gold/); +``` + +You should use the `let` keyword to declare your `currentWeapon` variable. + +```js +assert.match(code, /let currentWeapon/); +``` + +You should not change the values of your variables. + +```js +assert.equal(xp, 0); +assert.equal(health, 100); +assert.equal(gold, 50); +assert.equal(currentWeapon, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +var health = 100; +var gold = 50; +var currentWeapon = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md new file mode 100644 index 00000000000..f4a27916dea --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md @@ -0,0 +1,115 @@ +--- +id: 62a3b3eab50e193608c19fc6 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Using the `let` keyword, declare a variable called `fighting` but do not initialize it with a value. Remember to end your line with a semi-colon. + +# --hints-- + +You should use `let` to declare a variable `fighting`. + +```js +assert.match(code, /let fighting/); +``` + +Your `fighting` variable should not have a value. + +```js +assert.isUndefined(fighting); +``` + +You should not assign a value to your `fighting` variable. Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /let fighting;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md new file mode 100644 index 00000000000..c679c2cb1fe --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md @@ -0,0 +1,140 @@ +--- +id: 62a3b41c9494f937560640ab +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Declare two more variables named `monsterHealth` and `inventory`, but do not initialize them. + +# --hints-- + +You should use `let` to declare your `monsterHealth` variable. + +```js +assert.match(code, /let monsterHealth/i); +``` + +You should use camelCase to name your `monsterHealth` variable. + +```js +assert.match(code, /monsterHealth/); +``` + +`monsterHealth` should not have a value. + +```js +assert.isUndefined(monsterHealth); +``` + +You should not assign a value to your `monsterHealth` variable. Remember your semi-colon. + +```js +assert.match(code, /let monsterHealth;/); +``` + +You should use `let` to declare your `inventory` variable. + +```js +assert.match(code, /let inventory/i); +``` + +`inventory` should not have a value. + +```js +assert.isUndefined(inventory); +``` + +You should not assign a value to your `inventory` variable. Remember your semi-colon. + +```js +assert.match(code, /let inventory;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md new file mode 100644 index 00000000000..878b7879e25 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md @@ -0,0 +1,118 @@ +--- +id: 62a3b49686792938718b90d3 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The variables you have assigned have all had values that are numbers. JavaScript has multiple different data types. The next one you will use is the string. Strings are used to store things like words or text. Strings are surrounded with double quotes, single quotes, or backticks. Here is an example of declaring a variable with a string: + +```js +let developer = "Naomi"; +``` + +Assign the `inventory` variable to have the value of `stick`. + +# --hints-- + +You should set `inventory` to the string `stick`. + +```js +assert.equal(inventory, "stick"); +``` + +You should initialize your `inventory` variable with the string `stick`. + +```js +assert.match(code, /let\s+inventory\s*=\s*('|"|`)stick\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md new file mode 100644 index 00000000000..bb8a09862a3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md @@ -0,0 +1,142 @@ +--- +id: 62a3b506dbaead396f58a701 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The player's inventory in your game will be able to hold multiple items. You will need to use a data type that can do this. An array can be used to hold multiple values. For example: + +```js +let order = ["first", "second", "third"]; +``` + +This is an array which holds three values. Notice how the values are separated by commas. Change your `inventory` variable to be an array with the strings `stick`, `dagger`, and `sword`. + +# --hints-- + +Your `inventory` variable should be an array. + +```js +assert.isArray(inventory); +``` + +Your `inventory` variable should have three values. + +```js +assert.lengthOf(inventory, 3); +``` + +Your `inventory` variable should include the string `stick`. + +```js +assert.include(inventory, "stick"); +``` + +Your `inventory` variable should include the string `dagger`. + +```js +assert.include(inventory, "dagger"); +``` + +Your `inventory` variable should include the string `sword`. + +```js +assert.include(inventory, "sword"); +``` + +Your `inventory` variable should have the values in the correct order. + +```js +assert.deepEqual(inventory, ["stick", "dagger", "sword"]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = "stick"; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md new file mode 100644 index 00000000000..f7a00ecb775 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md @@ -0,0 +1,118 @@ +--- +id: 62a3b5843544ce3a77459c27 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +For now, you want the player to start with just the `stick`. Change the `inventory` array to have `stick` as its only value. + +# --hints-- + +Your `inventory` variable should still be an array. + +```js +assert.isArray(inventory); +``` + +Your `inventory` variable should only have one value. + +```js +assert.lengthOf(inventory, 1); +``` + +Your `inventory` variable should include the string `stick`. + +```js +assert.include(inventory, "stick"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick", "dagger", "sword"]; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md new file mode 100644 index 00000000000..af9e9e6bf70 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md @@ -0,0 +1,128 @@ +--- +id: 62a3b79d520a7f3d0e25afd6 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +JavaScript interacts with the HTML using the Document Object Model, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the `document` variable, which represents your entire HTML document. + +One method for finding specific elements in your HTML is using the `querySelector()` method. The `querySelector()` method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the `

` element in your HTML, you would write: + +```js +let h1 = document.querySelector("h1"); +``` + +Note that `h1` is a string and matches the CSS selector you would use. Create a `button1` variable and use `querySelector()` to assign it your element with the `id` of `button1`. Remember that CSS `id` selectors are prefixed with a `#`. + +# --hints-- + +You should use `let` to declare a `button1` variable. + +```js +assert.match(code, /let button1/); +``` + +You should use `document.querySelector()`. + +```js +assert.match(code, /document\.querySelector/); +``` + +You should use the `#button1` selector. + +```js +assert.match(code, /querySelector\(('|")#button1\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md new file mode 100644 index 00000000000..0e0eaee9ae7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md @@ -0,0 +1,116 @@ +--- +id: 62a3bb9aeefe4b3fc43c6d7b +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +`button1` is a variable that is not going to be reassigned. If you are not going to assign a new value to a variable, it is best practice to use the `const` keyword to declare it instead of the `let` keyword. This will tell JavaScript to throw an error if you accidentally reassign it. + +Change your `button1` variable to be declared with the `const` keyword. + +# --hints-- + +Your `button1` variable should be declared with `const`. + +```js +assert.match(code, /const button1/); +``` + +Your `button1` variable should still have the value of your `#button1` element. + +```js +assert.deepEqual(button1, document.querySelector("#button1")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +let button1 = document.querySelector("#button1"); +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md new file mode 100644 index 00000000000..065f7587076 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md @@ -0,0 +1,181 @@ +--- +id: 62a3bec30ea7f941412512dc +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Just like you did with the buttons, create variables for the following `id`s and use `querySelector()` to give them the element as a value: + +`text`, `xpText`, `healthText`, `goldText`, `monsterStats`, and `monsterName`. + +Remember to declare these with the `const` keyword, and name the variables to match the `id`s. + +# --hints-- + +You should declare a `text` variable with `const`. + +```js +assert.match(code, /const text/); +``` + +Your `text` variable should have the value of your `#text` element. + +```js +assert.deepEqual(text, document.querySelector('#text')); +``` + +You should declare a `xpText` variable with `const`. + +```js +assert.match(code, /const xpText/); +``` + +Your `xpText` variable should have the value of your `#xpText` element. + +```js +assert.deepEqual(xpText, document.querySelector('#xpText')); +``` + +You should declare a `healthText` variable with `const`. + +```js +assert.match(code, /const healthText/); +``` + +Your `healthText` variable should have the value of your `#healthText` element. + +```js +assert.deepEqual(healthText, document.querySelector('#healthText')); +``` + +You should declare a `goldText` variable with `const`. + +```js +assert.match(code, /const goldText/); +``` + +Your `goldText` variable should have the value of your `#goldText` element. + +```js +assert.deepEqual(goldText, document.querySelector('#goldText')); +``` + +You should declare a `monsterStats` variable with `const`. + +```js +assert.match(code, /const monsterStats/); +``` + +Your `monsterStats` variable should have the value of your `#monsterStats` element. + +```js +assert.deepEqual(monsterStats, document.querySelector('#monsterStats')); +``` + +You should declare a `monsterName` variable with `const`. + +```js +assert.match(code, /const monsterName/); +``` + +Your `monsterName` variable should have the value of your `#monsterName` element. + +```js +assert.deepEqual(monsterName, document.querySelector('#monsterName')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md new file mode 100644 index 00000000000..ed392fd2cc4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md @@ -0,0 +1,134 @@ +--- +id: 62a3c0ab883fd9435cd5c518 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Comments allow you to add notes to your code. In JavaScript, single-line comments can be written with `//` and multi-line comments can be written with `/*` and `*/`. For example, here are single and multi-line comments that say "Hello World": + +```js +// hello world +/* + hello world +*/ +``` + +Add a single-line comment that says `initialize buttons`. + +# --hints-- + +You should use the `//` symbol to start a single-line comment. + +```js +assert.match(code, /\/\//); +``` + +Your comment should have the text `initialize buttons`. + +```js +assert.match(code, /\/\/\s*initialize buttons/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md new file mode 100644 index 00000000000..0f2fe813e63 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md @@ -0,0 +1,134 @@ +--- +id: 62a3c2fccf186146b59c6e96 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +`button1` represents your first `button` element. These elements have a special property called `onclick`, which you can use to determine what happens when someone clicks that button. Properties in JavaScript can be accessed in a couple of ways - the first is with dot notation. Accessing the `onclick` property of a button would look like `button.onclick`. + +Use dot notation to set the `onclick` property of your `button1` to the variable `goStore`. This variable will be something you write later. Note that `button1` is already declared, so you do not need to use `let` or `const`. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button1`. + +```js +assert.match(code, /button1\.onclick/); +``` + +You should not use `let` or `const`. + +```js +assert.notMatch(code, /(let|const)\s+button1\.onclick/); +``` + +You should set the `onclick` property of `button1` to the variable `goStore`. + +```js +assert.match(code, /button1\.onclick\s*=\s*goStore/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- +// initialize buttons + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md new file mode 100644 index 00000000000..73d0dc234d9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md @@ -0,0 +1,151 @@ +--- +id: 62a3c4a0e52767482c5202d4 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Using the same syntax, set the `onclick` properties of `button2` and `button3` to `goCave` and `fightDragon` respectively. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button2`. + +```js +assert.match(code, /button2\.onclick/); +``` + +You should not use `let` or `const` to assign `button2.onclick`. + +```js +assert.notMatch(code, /(let|const)\s+button2\.onclick/); +``` + +You should set the `onclick` property of `button2` to the variable `goCave`. + +```js +assert.match(code, /button2\.onclick\s*=\s*goCave/); +``` + +You should use dot notation to access the `onclick` property of `button3`. + +```js +assert.match(code, /button3\.onclick/); +``` + +You should not use `let` or `const` to assign `button3.onclick`. + +```js +assert.notMatch(code, /(let|const)\s+button3\.onclick/); +``` + +You should set the `onclick` property of `button3` to the variable `fightDragon`. + +```js +assert.match(code, /button3\.onclick\s*=\s*fightDragon/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- +// initialize buttons +button1.onclick = goStore; + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md new file mode 100644 index 00000000000..38a51618160 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md @@ -0,0 +1,150 @@ +--- +id: 62a3c668afc43b4a134cca81 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Functions are special tools that allow you to run sections of code at specific times. You can declare functions using the `function` keyword. Here is an example of a function called `functionName` - note the opening and closing curly braces. These indicate the section of code that is within the function. + +```js +function functionName() { + +} +``` + +Create an empty function named `goStore`. This will match the `goStore` variable you used earlier. + +# --hints-- + +You should declare `goStore` with the `function` keyword. + +```js +assert.match(code, /function\s*goStore()/); +``` + +`goStore` should be defined. + +```js +assert.isDefined(goStore); +``` + +`goStore` should be a function. + +```js +assert.isFunction(goStore); +``` + +`goStore` should be an empty function. + +```js +assert.equal(goStore.toString(), "function goStore() {}"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md new file mode 100644 index 00000000000..7bec654ec15 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md @@ -0,0 +1,138 @@ +--- +id: 62a3c8bf3980c14c438d2aed +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message "Hello World". + +```js +function functionName() { + console.log("Hello World"); +} +``` + +# --hints-- + +You should have a `console.log("Going to store.");` line in your code. Don't forget the semi-colon. + +```js +assert.match(code, /console\.log\(('|")Going to store\.\1\);/); +``` + +Your `console.log("Going to store.");` line should be in your `goStore` function. + +```js +assert.match(goStore.toString(), /console\.log\(('|")Going to store\.\1\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md new file mode 100644 index 00000000000..a911182a57c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md @@ -0,0 +1,146 @@ +--- +id: 62a3c91a2bab1b4d6fabb726 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Now create a `goCave` function that prints `Going to cave.` to the console. + +# --hints-- + +You should use the `function` keyword to declare `goCave`. + +```js +assert.match(code, /function goCave/); +``` + +`goCave` should be a function. + +```js +assert.isFunction(goCave); +``` + +You should have a `console.log("Going to cave.");` line in your code. + +```js +assert.match(code, /console.log\(('|")Going to cave\.\1\)/); +``` + +Your `console.log("Going to cave.");` line should be inside your `goCave` function. + +```js +assert.match(goCave.toString(), /console.log\(('|")Going to cave\.\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + console.log("Going to store."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md new file mode 100644 index 00000000000..c14f5a7d858 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md @@ -0,0 +1,152 @@ +--- +id: 62a3cdb11478a34ff4a6470d +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Now create a `fightDragon` function that prints `Fighting dragon.` to the console. + +Once you have done that, open your console and try clicking the buttons on your project. + +# --hints-- + +You should use the `function` keyword to declare `fightDragon`. + +```js +assert.match(code, /function fightDragon/); +``` + +`fightDragon` should be a function. + +```js +assert.isFunction(fightDragon); +``` + +You should have a `console.log("Fighting dragon.");` line in your code. + +```js +assert.match(code, /console.log\(('|")Fighting dragon\.\1\)/); +``` + +Your `console.log("Fighting dragon.");` line should be inside your `fightDragon` function. + +```js +assert.match(fightDragon.toString(), /console.log\(('|")Fighting dragon\.\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + console.log("Going to store."); +} + +function goCave() { + console.log("Going to cave."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md new file mode 100644 index 00000000000..490ea3e8e2f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md @@ -0,0 +1,164 @@ +--- +id: 62a3cfc8328d3351b95d4f61 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +The `innerText` property controls the text that appears in an HTML element. For example: + +```js +const info = document.querySelector("#info"); +info.innerText = "Hello World"; +``` + +This code would change the element assigned to the `div` variable to have the text `Hello World`. + +When a player clicks your `Go to store` button, you want to change the buttons and text. Remove the code inside the `goStore` function and add a line that updates the text of `button1` to say `Buy 10 health (10 gold)`. + +# --hints-- + +You should not have a `console.log("Going to store.");` line in your code. + +```js +assert.notMatch(code, /console.log\(('|")Going to store\.\1\)/); +``` + +You should use dot notation to access the `innerText` property of `button1`. + +```js +assert.match(code, /button1\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button1`. + +```js +assert.notMatch(code, /(let|const)\s+button1.innerText/); +``` + +You should update the `innerText` property of `button1` to be `Buy 10 health (10 gold)`. + +```js +assert.match(code, /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + border: 1px solid black; + padding: 5px; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + console.log("Going to store."); +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md new file mode 100644 index 00000000000..8d5c8d1245f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md @@ -0,0 +1,176 @@ +--- +id: 62a7beb1ad61211ac153707f +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now add a line that updates the text of `button2` to say `Buy weapon (30 gold)` and update the text of `button3` to say `Go to town square`. + +# --hints-- + +You should use dot notation to access the `innerText` property of `button2`. + +```js +assert.match(code, /button2\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button2`. + +```js +assert.notMatch(code, /(let|const)\s+button2.innerText/); +``` + +You should update the `innerText` property of `button2` to be `Buy weapon (30 gold)`. + +```js +assert.match(code, /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/); +``` + +You should use dot notation to access the `innerText` property of `button3`. + +```js +assert.match(code, /button3\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button3`. + +```js +assert.notMatch(code, /(let|const)\s+button3.innerText/); +``` + +You should update the `innerText` property of `button3` to be `Go to town square`. + +```js +assert.match(code, /button3\.innerText\s*=\s*('|")Go to town square\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button3\.innerText\s*=\s*('|")Go to town square\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md new file mode 100644 index 00000000000..981e39344f7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md @@ -0,0 +1,202 @@ +--- +id: 62a7bf06d2ad9d1c5024e833 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +You will also need to update the functions that run when the buttons are clicked. Update the `onclick` property for each button to run `buyHealth`, `buyWeapon`, and `goTown`, respectively. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button1`. + +```js +assert.match(code, /button1\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button1`. + +```js +assert.notMatch(code, /(let|const)\s+button1.onclick/); +``` + +You should set the `onclick` property of `button1` to be `buyHealth`. + +```js +assert.match(code, /button1\.onclick\s*=\s*buyHealth/); +``` + +You should set the `onclick` property of `button1` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button1\.onclick\s*=\s*buyHealth/); +``` + +You should use dot notation to access the `onclick` property of `button2`. + +```js +assert.match(code, /button2\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button2`. + +```js +assert.notMatch(code, /(let|const)\s+button2.onclick/); +``` + +You should set the `onclick` property of `button2` to be `buyWeapon`. + +```js +assert.match(code, /button2\.onclick\s*=\s*buyWeapon/); +``` + +You should set the `onclick` property of `button2` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button2\.onclick\s*=\s*buyWeapon/); +``` + +You should use dot notation to access the `onclick` property of `button3`. + +```js +assert.match(code, /button3\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button3`. + +```js +assert.notMatch(code, /(let|const)\s+button3.onclick/); +``` + +You should set the `onclick` property of `button3` to be `goTown`. + +```js +assert.match(code, /button3\.onclick\s*=\s*goTown/); +``` + +You should set the `onclick` property of `button3` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button3\.onclick\s*=\s*goTown/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md new file mode 100644 index 00000000000..eed48a208c4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -0,0 +1,157 @@ +--- +id: 62a7bfabe119461eb13ccbd6 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Now you need to modify your display text. Change the `innerText` of the `text` to be `You enter the store.`. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text`. + +```js +assert.match(code, /text\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `text`. + +```js +assert.notMatch(code, /(let|const)\s+text.innerText/); +``` + +You should update the `innerText` property of `text` to be `You enter the store.`. + +```js +assert.match(code, /text\.innerText\s*=\s*('|")You enter the store.\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /text\.innerText\s*=\s*('|")You enter the store.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md new file mode 100644 index 00000000000..ae7d6df92f7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md @@ -0,0 +1,172 @@ +--- +id: 62a7bfd9179b7f1f6a15fb1e +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Create three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`. + +# --hints-- + +You should declare `buyHealth` with the `function` keyword. + +```js +assert.match(code, /function buyHealth/); +``` + +You should declare `buyWeapon` with the `function` keyword. + +```js +assert.match(code, /function buyWeapon/); +``` + +You should declare `goTown` with the `function` keyword. + +```js +assert.match(code, /function goTown/); +``` + +`buyHealth` should be an empty function. + +```js +assert.equal(buyHealth.toString(), 'function buyHealth() {}'); +``` + +`buyWeapon` should be an empty function. + +```js +assert.equal(buyWeapon.toString(), 'function buyWeapon() {}'); +``` + +`goTown` should be an empty function. + +```js +assert.equal(goTown.toString(), 'function goTown() {}'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md new file mode 100644 index 00000000000..b985f7eded3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md @@ -0,0 +1,162 @@ +--- +id: 62a7c011eef9fb2084b966db +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move your `goTown` function above your `goStore` function. Then copy and paste the contents of the `goStore` function into the `goTown` function. + +# --hints-- + +Your `goTown` function should come before your `goStore` function. + +```js +const goTown = code.split(" ").indexOf("goTown()"); +const goStore = code.split(" ").indexOf("goStore()"); +assert.isBelow(goTown, goStore); +``` + +Your `goTown` function should have the same contents as your `goStore` function. + +```js +const goTownString = goTown.toString().replace("goTown", ""); +const goStoreString = goStore.toString().replace("goStore", ""); +assert.equal(goTownString, goStoreString); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function goTown() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md new file mode 100644 index 00000000000..20ac473611a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md @@ -0,0 +1,194 @@ +--- +id: 62a7c071219da921758a35bb +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +In your `goTown` function, update your button `innerText` properties to be `Go to store`, `Go to cave`, and `Fight dragon`. Update your `onclick` properties to be `goStore`, `goCave`, and `fightDragon`, respectively. Finally, update your text's `innerText` property to be `You are in the town square. You see a sign that says Store.`. + +# --hints-- + +You should set the `button1.innerText` property to be `Go to store` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/); +``` + +You should set the `button2.innerText` property to be `Go to cave` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/); +``` + +You should set the `button3.innerText` property to be `Fight dragon` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/); +``` + +You should set the `button1.onclick` property to be `goStore` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button1\.onclick\s*=\s*goStore/); +``` + +You should set the `button2.onclick` property to be `goCave` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button2\.onclick\s*=\s*goCave/); +``` + +You should set the `button3.onclick` property to be `fightDragon` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button3\.onclick\s*=\s*fightDragon/); +``` + +You should set the `text.innerText` property to be `You are in the town square. You see a sign that says Store.` in your `goTown` function. + +```js +assert.match(goTown.toString(), /text\.innerText\s*=\s*('|")You are in the town square. You see a sign that says Store\.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goTown() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md new file mode 100644 index 00000000000..6b26d69619b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md @@ -0,0 +1,164 @@ +--- +id: 62a7c23e6b511f22ed71197a +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You need to wrap the text `Store` in double quotes. Because your string is already wrapped in double quotes, you'll need to escape the quotes around `Store`. You can escape them with a backslash `\`. Here is an example: + +```js +const escapedString = "Naomi likes to play \"Zelda\" sometimes."; +``` + +Wrap the text `Store` in double quotes within your `text.innerText` line. + +# --hints-- + +You should wrap the text `Store` in double quotes. + +```js +assert.match(goTown.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"."/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says Store."; +} +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md new file mode 100644 index 00000000000..82ae722f3d8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md @@ -0,0 +1,180 @@ +--- +id: 62a7cc99577fbf25ee7a7d76 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +You have repetition in the `goTown` and `goStore` functions. When you have repetition in your code, this is a sign that you need another function. Functions can take parameters, which are values that are given to the function each time it is run. Here is a function that takes a parameter called `param`: + +```js +function myFunction(param) { + console.log(param); +} +``` + +Create an empty `update` function that takes a parameter called `location`. + +# --hints-- + +You should use the `function` keyword to declare `update`. + +```js +assert.match(code, /function\s+update/); +``` + +Your `update` function should take a parameter called `location`. + +```js +assert.match(update.toString(), /update\(location\)/); +``` + +Your `update` function should be empty. + +```js +assert.equal(update.toString(), function update(location) {}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- + +--fcc-editable-region-- + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md new file mode 100644 index 00000000000..a36f9b9f86e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md @@ -0,0 +1,176 @@ +--- +id: 62a8a929e4260d08093756d2 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Create a variable called `locations` and set it to an empty array. + +# --hints-- + +You should use `const` to declare `locations`. + +```js +assert.match(code, /const locations/); +``` + +`locations` should be an array. + + +```js +assert.isArray(locations); +``` + +`locations` should be empty. + +```js +assert.equal(locations.length, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- + +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md new file mode 100644 index 00000000000..4f9143c205b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md @@ -0,0 +1,171 @@ +--- +id: 62a8a9d876b2580943ba9351 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You previously used an array to store strings. But arrays can store any data type. This time, your array will be storing objects. Objects are similar to arrays, but with a few differences. One difference is that objects use properties, or keys, to access and modify data. + +Objects are indicated by curly braces. An empty object would look like `{}`. Add an empty object to your `locations` array. + +# --hints-- + +Your first value of `locations` should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first value of `locations` should be an empty object. + +```js +assert.deepEqual(locations[0], {}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = []; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md new file mode 100644 index 00000000000..d5c3664e5ed --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md @@ -0,0 +1,187 @@ +--- +id: 62a8aa98a8289d0a698eee1d +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Object properties are written as `key: value` pairs, where `key` is the name of the property (or the key), and `value` is the value that property holds. For example, here is an object with a key of `name` set to `Quincy Larson`. + +```js +{ + name: "Quincy Larson" +} +``` + +Add a `name` property to your empty object and give it a value of `town square`. + +# --hints-- + +Your first value of `locations` should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first value of `locations` should have a `name` property. + +```js +assert.isDefined(locations[0].name); +``` + +Your first value of `locations` should have a `name` property with a value of `town square`. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md new file mode 100644 index 00000000000..45578691077 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md @@ -0,0 +1,200 @@ +--- +id: 62a8ab0e27cbaf0b54ba8a42 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Just like array values, object properties are separated by a comma. Add a comma after your `name` property and add a `button text` property with the value of an empty array. Note that because the property name has more than one word, you'll need to surround it in quotes. + +For example: + +```js +{ + name: "Naomi", + "favorite color": "purple" +} +``` + +# --hints-- + +Your first `locations` value should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first `locations` value should have a `button text` property. + +```js +assert.isDefined(locations[0]["button text"]); +``` + +Your first `locations` value should have a `button text` property with a value that is an array. + +```js +assert.isArray(locations[0]["button text"]); +``` + +Your first `locations` value should have a `button text` property with a value that is an empty array. + +```js +assert.equal(locations[0]["button text"].length, 0); +``` + +You should not remove or change the `name` property. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square" + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md new file mode 100644 index 00000000000..5a1412cf312 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md @@ -0,0 +1,194 @@ +--- +id: 62a8ac194679e60cb561b0a8 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give your empty `button text` array three string elements. Use the three strings being assigned to the button `innerText` properties in the `goTown` function. Remember that array values are separated by commas. + +# --hints-- + +Your `button text` array should have three elements. + +```js +assert.lengthOf(locations[0]["button text"], 3); +``` + +Your `button text` array should have three strings. + +```js +assert.isString(locations[0]["button text"][0]); +assert.isString(locations[0]["button text"][1]); +assert.isString(locations[0]["button text"][2]); +``` + +The first value in the `button text` array should be "Go to store". + +```js +assert.equal(locations[0]["button text"][0], "Go to store"); +``` + +The second value in the `button text` array should be "Go to cave". + +```js +assert.equal(locations[0]["button text"][1], "Go to cave"); +``` + +The third value in the `button text` array should be "Fight dragon". + +```js +assert.equal(locations[0]["button text"][2], "Fight dragon"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": [] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md new file mode 100644 index 00000000000..1229366bb3a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md @@ -0,0 +1,198 @@ +--- +id: 62a8ad8e01d7cb0deae5ec66 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Create another property in your object called `button functions`. Give this property an array containing the three functions assigned to the `onclick` properties in the `goTown` function. Remember that these functions are variables, not strings, and should not be wrapped in quotes. + +# --hints-- + +Your first `locations` object should have a `button functions` property. + +```js +assert.isDefined(locations[0]["button functions"]); +``` + +Your `button functions` property should be an array. + +```js +assert.isArray(locations[0]["button functions"]); +``` + +Your `button functions` property should have three values in it. + +```js +assert.lengthOf(locations[0]["button functions"], 3); +``` + +Your first `button functions` array value should be the function `goStore`. + +```js +assert.equal(locations[0]["button functions"][0], goStore); +``` + +Your second `button functions` array value should be the function `goCave`. + +```js +assert.equal(locations[0]["button functions"][1], goCave); +``` + +Your third `button functions` array value should be the function `fightDragon`. + +```js +assert.equal(locations[0]["button functions"][2], fightDragon); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md new file mode 100644 index 00000000000..7ac20d72a3e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md @@ -0,0 +1,181 @@ +--- +id: 62a8ade9b2f5b30ef0b606c2 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Add one final property to the object named `text`. Give this property the final `text.innerText` value from the `goTown` function. + +# --hints-- + +Your first `locations` value should have a `text` property. + +```js +assert.isDefined(locations[0]["text"]); +``` + +Your `text` property should be a string. + +```js +assert.isString(locations[0]["text"]); +``` + +Your `text` property should have the value `You are in the town square. You see a sign that says \"Store\".` + +```js +assert.equal(locations[0]["text"], "You are in the town square. You see a sign that says \"Store\"."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md new file mode 100644 index 00000000000..79d6d140e1e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md @@ -0,0 +1,235 @@ +--- +id: 62a8ae85fcaedc0fddc7ca4f +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Add a second object to your `locations` array (remember to separate them with a comma). Following the pattern you used in the first object, create the same properties but use the values from the `goStore` function. Set the `name` property to `store`. + +# --hints-- + +Your `locations` array should have two values. + +```js +assert.lengthOf(locations, 2); +``` + +Both `locations` values should be objects. + + +```js +assert.isObject(locations[0]); +assert.isObject(locations[1]); +``` + +Your second `locations` object should have a `name` property with the value of `store`. + +```js +assert.equal(locations[1].name, "store"); +``` + +Your second `locations` object should have a `button text` property which is an array. + +```js +assert.isArray(locations[1]["button text"]); +``` + +Your `button text` property should have the string values `Buy 10 health (10 gold)`, `Buy weapon (30 gold)`, and `Go to town square`. + +```js +assert.equal(locations[1]["button text"][0], "Buy 10 health (10 gold)"); +assert.equal(locations[1]["button text"][1], "Buy weapon (30 gold)"); +assert.equal(locations[1]["button text"][2], "Go to town square"); +``` + +Your second `locations` object should have a `button functions` property which is an array. + +```js +assert.isArray(locations[1]["button functions"]); +``` + +Your `button functions` property should have the function values `buyHealth`, `buyWeapon`, and `goTown`. + +```js +assert.equal(locations[1]["button functions"][0], buyHealth); +assert.equal(locations[1]["button functions"][1], buyWeapon); +assert.equal(locations[1]["button functions"][2], goTown); +``` + +Your second `locations` object should have a `text` property which is a string. + +```js +assert.isString(locations[1].text); +``` + +Your second `locations` object should have a `text` property with the value of `You enter the store.`. + +```js +assert.equal(locations[1].text, "You enter the store."); +``` + +You should not modify the first `locations` object. + +```js +assert.deepEqual(locations[0], { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." +}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md new file mode 100644 index 00000000000..c60cf5907da --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md @@ -0,0 +1,224 @@ +--- +id: 62a8b0b5053f16111b0b6b5f +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Now you can consolidate some of your code. Start by copying the code from inside the `goTown` function and paste it into your `update` function. Then, remove all the code from inside the `goTown` and `goStore` functions. + +# --hints-- + +Your `update` function should set `button1.innerText` to `Go to store`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/); +``` + +Your `update` function should set `button2.innerText` to `Go to cave`. + +```js +assert.match(update.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/); +``` + +Your `update` function should set `button3.innerText` to `Fight dragon`. + +```js +assert.match(update.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/); +``` + +Your `update` function should set `button1.onclick` to `goStore`. + +```js +assert.match(update.toString(), /button1\.onclick\s*=\s*goStore/); +``` + +Your `update` function should set `button2.onclick` to `goCave`. + +```js +assert.match(update.toString(), /button2\.onclick\s*=\s*goCave/); +``` + +Your `update` function should set `button3.onclick` to `fightDragon`. + +```js +assert.match(update.toString(), /button3\.onclick\s*=\s*fightDragon/); +``` + +Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says "Store".`. + +```js +assert.match(update.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"\."/); +``` + +Your `goTown` function should be empty. + +```js +assert.match(goTown.toString(), /function goTown\(\) \{\}/); +``` + +Your `goStore` function should be empty. + +```js +assert.match(goStore.toString(), /function goStore\(\) \{\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md new file mode 100644 index 00000000000..450bc66c133 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md @@ -0,0 +1,176 @@ +--- +id: 62a8b1762b7775124622e1a3 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Instead of assigning the `innerText` and `onclick` properties to specific strings and functions, the `update` function will use data from the `location` that is passed into it. First, that data needs to be passed. Inside the `goTown` function, call the `update` function. Here is an example of calling a function named `myFunction`: `myFunction();`. + +# --hints-- + +You should call the `update` function in the `goTown` function. + +```js +assert.match(goTown.toString(), /update\(\)/); +``` + +Don't forget your ending semi-colon. + +```js +assert.match(goTown.toString(), /update\(\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md new file mode 100644 index 00000000000..4d5aa1df9b9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md @@ -0,0 +1,170 @@ +--- +id: 62a8b3cc436db8139cc5fc09 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +You now need to pass the `location` argument into the `update` call. You pass arguments by including them within the parentheses of the function call. For example, calling `myFunction` with an `arg` argument would look like: `myFunction(arg)`. Pass your `locations` array into the `update` call. + +# --hints-- + +You should pass the `locations` array into the `update` call. + +```js +assert.match(goTown.toString(), /update\(locations\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md new file mode 100644 index 00000000000..a8bef26a706 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md @@ -0,0 +1,190 @@ +--- +id: 62a8b6536156c51500739b41 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +The `locations` array contains two locations: the town square and the store. Currently you are passing that entire array into the update functions. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. + +This is called bracket notation. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array. + +# --hints-- + +You should use bracket notation with `locations`. + +```js +assert.match(code, /locations\[/); +``` + +You should access the first object in the `locations` array. Remember that arrays are zero-based. + +```js +assert.match(code, /locations\[0\]/); +``` + +You should pass the first object in the `locations` array into the `update` function. + +```js +assert.match(code, /update\(locations\[0\]\);/); +``` + +This call should still be in your `goTown()` function. + +```js +assert.match(goTown.toString(), /update\(locations\[0\]\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(locations); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md new file mode 100644 index 00000000000..8a6a5c5c67a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md @@ -0,0 +1,176 @@ +--- +id: 62a8b711ab7a12161c7d9b67 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Now your `update` function needs to use the argument you pass into it. Inside the `update` function, change the `button1.innerText` assignment to be `location["button text"]`. That uses bracket notation to get the `button text` property of the `location` object passed into the function. + +# --hints-- + +Your `update` function should use bracket notation to get the `button text` property of the `location` object passed into the function. + +```js +assert.match(update.toString(), /location[('|")button text\1]/); +``` + +You should assign the value of the `button text` property of the `location` object to the `innerText` property of `button1`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md new file mode 100644 index 00000000000..ab4856b1c26 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md @@ -0,0 +1,176 @@ +--- +id: 62a8b9770050d217d2247801 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +`location["button text"]` is an array with three elements. Change the `button1.innerText` assignment to be the first element of that array instead. + +# --hints-- + +You should access the first element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[0\]/); +``` + +You should set the `button1.innerText` property to be the first element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]\[0\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md new file mode 100644 index 00000000000..458368c6e11 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md @@ -0,0 +1,188 @@ +--- +id: 62a8c0c8313e891a15ec23e7 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Now update `button2.innerText` and `button3.innerText` to be assigned the second and third values of the `button text` array, respectively. + +# --hints-- + +You should access the second element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[1\]/); +``` + +You should set the `button2.innerText` property to be the second element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button2\.innerText\s*=\s*location\[('|")button text\1\]\[1\]/); +``` + +You should access the third element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[2\]/); +``` + +You should set the `button3.innerText` property to be the third element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button3\.innerText\s*=\s*location\[('|")button text\1\]\[2\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md new file mode 100644 index 00000000000..4731c369e1e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md @@ -0,0 +1,200 @@ +--- +id: 62a8c1154d3ae11aee80353f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Following the same pattern as you did for the button text, update the three buttons' `onclick` assignments to be the first, second, and third values of the `button functions` array. + +# --hints-- + +You should access the first element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[0\]/); +``` + +You should set the `button1.onclick` property to be the second element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button1\.onclick\s*=\s*location\[('|")button functions\1\]\[0\]/); +``` + +You should access the second element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[1\]/); +``` + +You should set the `button2.onclick` property to be the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button2\.onclick\s*=\s*location\[('|")button functions\1\]\[1\]/); +``` + +You should access the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[2\]/); +``` + +You should set the `button3.onclick` property to be the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button3\.onclick\s*=\s*location\[('|")button functions\1\]\[2\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store.\""; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md new file mode 100644 index 00000000000..ca8a532ec15 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md @@ -0,0 +1,176 @@ +--- +id: 62a8c151b23bf21bc7c4fcba +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Finally, update the `text.innerText` assignment to equal the `text` from the location object. However, instead of using bracket notation, use dot notation. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`. + +# --hints-- + +You should use dot notation to access the `text` property of the `location` object. + +```js +assert.match(update.toString(), /location\.text/); +``` + +You should set the `text.innerText` property to be the `text` property of the `location` object. + +```js +assert.match(update.toString(), /text\.innerText\s*=\s*location\.text/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md new file mode 100644 index 00000000000..422ff092c3e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md @@ -0,0 +1,178 @@ +--- +id: 62a8c173949f851c83c64756 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Now update your `goStore` function to call the `update` function. Pass the second element of the `locations` array as your argument. + +To make sure your refactoring is correct, try clicking your first button again. You should see the same changes to your webpage that you saw earlier. + +# --hints-- + +Your `goStore` function should call the `update` function. + +```js +assert.match(goStore.toString(), /update\(/); +``` + +Your `goStore` function should pass the second element of the `locations` array as your argument to `update()`. + +```js +assert.match(goStore.toString(), /update\(locations\[1\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +--fcc-editable-region-- +function goStore() { + +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md new file mode 100644 index 00000000000..d7800eb4dce --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md @@ -0,0 +1,190 @@ +--- +id: 62a8c242b25a531f2909e5bc +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Create two more empty functions named `fightSlime` and `fightBeast`. These functions will be used in your upcoming `cave` object. + +# --hints-- + +`fightSlime` should be a function. + +```js +assert.isFunction(fightSlime); +``` + +`fightBeast` should be a function. + +```js +assert.isFunction(fightBeast); +``` + +`fightSlime` should be empty. + +```js +assert.match(fightSlime.toString(), /function fightSlime\(\) \{\}/); +``` + +`fightBeast` should be empty. + +```js +assert.match(fightBeast.toString(), /function fightBeast\(\) \{\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md new file mode 100644 index 00000000000..d96b10aaff6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md @@ -0,0 +1,234 @@ +--- +id: 62a8c2bbbd8aa82052f47c53 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Add a third object to the `locations` array. Give it the same properties as the other two objects. + +Set `name` to `cave`. Set `button text` to an array with the strings `Fight slime`, `Fight fanged beast`, and `Go to town square`. Set the `button functions` to an array with the variables `fightSlime`, `fightBeast`, and `goTown`. Set the `text` property to `You enter the cave. You see some monsters.`. + +# --hints-- + +You should have three values in your `locations` array. + +```js +console.log(locations); +assert.lengthOf(locations, 3); +``` + +Your third `locations` value should be an object. + +```js +assert.isObject(locations[2]); +``` + +Your third `locations` object should have a `name` property with the value of `cave`. + +```js +assert.equal(locations[2].name, "cave"); +``` + +Your third `locations` object should have a `button text` property which is an array. + +```js +assert.isArray(locations[2]["button text"]); +``` + +Your `button text` property should have the string values `Fight slime`, `Fight fanged beast`, and `Go to town square`. + +```js +assert.equal(locations[2]["button text"][0], "Fight slime"); +assert.equal(locations[2]["button text"][1], "Fight fanged beast"); +assert.equal(locations[2]["button text"][2], "Go to town square"); +``` + +Your third `locations` object should have a `button functions` property which is an array. + +```js +assert.isArray(locations[2]["button functions"]); +``` + +Your `button functions` property should have the function values `fightSlime`, `fightBeast`, and `goTown`. + +```js +assert.equal(locations[2]["button functions"][0], fightSlime); +assert.equal(locations[2]["button functions"][1], fightBeast); +assert.equal(locations[2]["button functions"][2], goTown); +``` + +Your third `locations` object should have a `text` property which is a string. + +```js +assert.isString(locations[2].text); +``` + +Your third `locations` object should have a `text` property with the value of `You enter the cave. You see some monsters.`. + +```js +assert.equal(locations[2].text, "You enter the cave. You see some monsters."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, +--fcc-editable-region-- + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md new file mode 100644 index 00000000000..1d663fa1670 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md @@ -0,0 +1,204 @@ +--- +id: 62a8c31ec0ec78216a1c36a0 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Now that you have a `cave` location object, update your `goCave` function to call `update` and pass that new `cave` location. Remember that this is the third element in your `locations` array. + +Don't forget to remove your `console.log` call! + +# --hints-- + +You should use bracket notation to access the third element in your `locations` array. + +```js +assert.match(code, /locations\[2\]/); +``` + +You should pass the third element in your `locations` array to `update`. + +```js +assert.match(code, /update\(locations\[2\]\)/); +``` + +You should call `update` with the third element in your `locations` array in your `goCave` function. + +```js +assert.match(goCave.toString(), /update\(locations\[2\]\)/); +``` + +You should not have the `console.log` statement in your `goCave` function. + +```js +assert.notMatch(goCave.toString(), /console\.log/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +--fcc-editable-region-- +function goCave() { + console.log("Going to cave."); +} +--fcc-editable-region-- + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md new file mode 100644 index 00000000000..4d33b655a6b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md @@ -0,0 +1,194 @@ +--- +id: 62a8c370ad8c68227137e0bc +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Now that your `store` and `cave` locations are complete, you can code the actions the player takes at those locations. Inside the `buyHealth` function, set `gold` equal to `gold` minus `10`. + +For example, here is how you would set `num` equal to `5` less than `num`: `num = num - 5;`. + +# --hints-- + +You should subtract `10` from `gold`. + +```js +assert.match(code, /gold\s*=\s*gold\s*-\s*10/); +``` + +Your `buyHealth` function should reduce `gold` by `10`. + +```js +gold = 10; +buyHealth(); +assert.equal(gold, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md new file mode 100644 index 00000000000..df1d38ffce5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md @@ -0,0 +1,192 @@ +--- +id: 62a8c3ebc6c35e23785e1a19 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +After the `gold` is updated, add a line to set `health` equal to `health` plus `10`. + +# --hints-- + +You should add `10` to `health`. + +```js +assert.match(code, /health\s*=\s*health\s*\+\s*10/); +``` + +Your `buyHealth` function should increase `health` by `10`. + +```js +health = 10; +buyHealth(); +assert.equal(health, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold = gold - 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md new file mode 100644 index 00000000000..a5bb57d211c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md @@ -0,0 +1,203 @@ +--- +id: 62a8c41ecaf1bd24536129b8 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +There is a shorthand way to add or subtract from a variable called compound assignment. For example, changing `num = num + 5` to compound assignment would look like `num += 5`. + +Update both lines inside your `buyHealth` function to use compound assignment. + +# --hints-- + +You should change `gold` to use compound assignment. + +```js +assert.notMatch(code, /gold\s*=\s*gold\s*-\s*10/); +``` + +You should change `health` to use compound assignment. + +```js +assert.notMatch(code, /health\s*=\s*health\s*\+\s*10/); +``` + +Your `buyHealth` function should still update the values. + +```js +gold = 10; +health = 10; +buyHealth(); +assert.equal(gold, 0); +assert.equal(health, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold = gold - 10; + health = health + 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md new file mode 100644 index 00000000000..70e928a9bd6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md @@ -0,0 +1,207 @@ +--- +id: 62a8c465fa7b0c252f4a8f0c +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Now that you are updating the `gold` and `health` variables, you need to display those new values on the game screen. After your assignment lines, assign the `innerText` property of `goldText` to be the variable `gold`. Use the same pattern to update `healthText` with the `health` variable. + +Here is an example: + +```js +let value = 100; +const total = document.querySelector('#total'); +total.innerText = value; +``` + +You can test this by clicking your "Go to store" button, followed by your "Buy Health" button. + +# --hints-- + +Your `buyHealth` function should update the text of `healthText` to be the value of `health`. + +```js +health = 10; +buyHealth(); +const target = document.querySelector('#healthText'); +assert.equal(target.innerText, '20'); +``` + +Your `buyHealth` function should update the text of `goldText` to be the value of `gold`. + +```js +gold = 10; +buyHealth(); +const target = document.querySelector('#goldText'); +assert.equal(target.innerText, '0'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold -= 10; + health += 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md new file mode 100644 index 00000000000..89161b6c20f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md @@ -0,0 +1,209 @@ +--- +id: 62a8c4db0710f3260f867a92 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +What if the player doesn't have enough gold to buy health? When you want to run code conditionally, you can use the `if` statement. Put all of the code in your `buyHealth` function inside an `if` statement. For example: + +```js +function myFunction() { + if ("condition") { + console.log("Hello World!"); + } +} +``` + +For now, follow that pattern to use a string `condition` inside your `if` statement. + +# --hints-- + +Your `buyHealth` function should have an `if` statement. + +```js +assert.match(buyHealth.toString(), /if/); +``` + +Your `if` statement should have the string `condition` for the condition. + +```js +assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)/); +``` + +All of your `buyHealth` code should be inside the `if` statement. + +```js +assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)\s*\{[\s\S]*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md new file mode 100644 index 00000000000..e68eacaf744 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md @@ -0,0 +1,221 @@ +--- +id: 62a8c56247609626fa4a8d6e +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +The `condition` string is just a placeholder. Change the `if` statement condition to check if `gold` is greater than or equal to `10`. + +Here is an `if` statement that checks if `num` is greater than or equal to `5`: + +```js +if (num >= 5) { + +} +``` + +# --hints-- + +Your `if` statement should check if `gold` is greater than or equal to `10`. + +```js +assert.match(buyHealth.toString(), /if\s*\(gold\s*>=\s*10\)/); +``` + +Your `buyHealth` function should update `health` and `gold` if `gold` is greater than or equal to `10`. + +```js +gold = 10; +health = 10; +buyHealth(); +assert.equal(health, 20); +assert.equal(gold, 0); +const healthElement = document.getElementById('healthText'); +assert.equal(healthElement.innerText, '20'); +const goldElement = document.getElementById('goldText'); +assert.equal(goldElement.innerText, '0'); +``` + +Your `buyHealth` function should not update `health` and `gold` if `gold` is less than `10`. + +```js +gold = 5; +health = 10; +buyHealth(); +assert.equal(health, 10); +assert.equal(gold, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if ("condition") { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md new file mode 100644 index 00000000000..d29d4fa92c7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md @@ -0,0 +1,206 @@ +--- +id: 62a8c5db7888af27af23f0dd +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Now when a player tries to buy health it will only work if they have enough money. If they do not, nothing will happen. Add an `else` statement where you can put code to run if a player does not have enough money. + +Here is an example of an empty `else` statement: + +```js +if (num >= 5) { + +} else { + +} +``` + +# --hints-- + +Your `buyHealth` function should have an `else` statement. + +```js +assert.match(buyHealth.toString(), /else/); +``` + +Your `else` statement should come after your `if` statement. + +```js +const split = buyHealth.toString().split(/\s/); +assert.isAbove(split.indexOf('else'), split.indexOf('if')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md new file mode 100644 index 00000000000..3ef17db2434 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md @@ -0,0 +1,200 @@ +--- +id: 62a8c65b75664c28a8e59c16 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Inside the `else` statement, set `text.innerText` to equal `You do not have enough gold to buy health.`. + +# --hints-- + +Your `buyHealth` function should set `text.innerText` to equal `You do not have enough gold to buy health.`. + +```js +assert.match(buyHealth.toString(), /text\.innerText\s*=\s*('|")You do not have enough gold to buy health\.\1/); +``` + +Your `buyHealth` function should update `text.innerText` when `gold` is less than `10`. + +```js +gold = 5; +health = 10; +buyHealth(); +assert.equal(text.innerText, 'You do not have enough gold to buy health.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md new file mode 100644 index 00000000000..90b8c75c72f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md @@ -0,0 +1,204 @@ +--- +id: 62a8c6815f5f1a29735efe1b +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Use `const` to create a `weapons` variable above your `locations` array. Assign it an empty array. + +# --hints-- + +You should use `const` to declare your `weapons` variable. + +```js +assert.match(code, /const weapons/i); +``` + +Your `weapons` variable should be an array. + +```js +assert.isArray(weapons); +``` + +Your `weapons` variable should be empty. + +```js +assert.equal(weapons.length, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- + +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md new file mode 100644 index 00000000000..bed05c8d88b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md @@ -0,0 +1,229 @@ +--- +id: 62a8c7322e42962ad53ad204 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Just like your `locations` array, your `weapons` array will hold objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should have the `name` set to `stick` and the `power` set to `5`. The second should be `dagger` and `30`. The third, `claw hammer` and `50`. The fourth, `sword` and `100`. + +# --hints-- + +Your `weapons` array should have four values. + +```js +assert.lengthOf(weapons, 4); +``` + +Your `weapons` array should have four objects. + +```js +assert.isObject(weapons[0]); +assert.isObject(weapons[1]); +assert.isObject(weapons[2]); +assert.isObject(weapons[3]); +``` + +Your first `weapons` object should have the `name` set to `stick` and the `power` set to `5`. + +```js +assert.equal(weapons[0].name, 'stick'); +assert.equal(weapons[0].power, 5); +``` + +Your second `weapons` object should have the `name` set to `dagger` and the `power` set to `30`. + +```js +assert.equal(weapons[1].name, 'dagger'); +assert.equal(weapons[1].power, 30); +``` + +Your third `weapons` object should have the `name` set to `claw hammer` and the `power` set to `50`. + +```js +assert.equal(weapons[2].name, 'claw hammer'); +assert.equal(weapons[2].power, 50); +``` + +Your fourth `weapons` object should have the `name` set to `sword` and the `power` set to `100`. + +```js +assert.equal(weapons[3].name, 'sword'); +assert.equal(weapons[3].power, 100); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const weapons = []; +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md new file mode 100644 index 00000000000..422e0ad66b5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md @@ -0,0 +1,203 @@ +--- +id: 62a8c7a59e72c02bb1c717d2 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Inside your `buyWeapon` function, add an `if` statement to check if `gold` is greater than or equal to `30`. + +# --hints-- + +Your `buyWeapon` function should have an `if` statement. + +```js +assert.include(buyWeapon.toString(), 'if'); +``` + +Your `if` statement should check if `gold` is greater than or equal to `30`. + +```js +assert.match(buyWeapon.toString(), /if\s*\(gold\s*>=\s*30\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md new file mode 100644 index 00000000000..cded49b4395 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md @@ -0,0 +1,215 @@ +--- +id: 62a8c89e4272512d44fc1c66 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Similar to your `buyHealth` function, set `gold` equal to 30 less than its current value. Make sure this is inside your `if` statement. + +# --hints-- + +You should use compound assignment to subtract `30` from `gold`. + +```js +assert.match(buyWeapon.toString(), /gold\s*-=\s*30/); +``` + +Your `buyWeapon` function should reduce `gold` by `30`. + +```js +gold = 30; +buyWeapon(); +assert.equal(gold, 0); +``` + +Your code should be in your `if` statement. + +```js +gold = 20; +buyWeapon(); +assert.equal(gold, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md new file mode 100644 index 00000000000..7f2575cbb11 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md @@ -0,0 +1,219 @@ +--- +id: 62a8c8cee8e5cf2e001789b4 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +The value of the `currentWeapon` variable corresponds to an index in the `weapons` array. The player starts with a `stick`, since `currentWeapon` starts at `0` and `weapons[0]` is the `stick` weapon. + +In the `buyWeapon` function, add one to `currentWeapon` - the user is buying the next weapon in the `weapons` array. + +# --hints-- + +You should use compound assignment to add one to `currentWeapon`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/); +``` + +Your `buyWeapon` function should increase `currentWeapon` by `1`. + +```js +gold = 30; +currentWeapon = 0; +buyWeapon(); +assert.equal(currentWeapon, 1); +``` + +Your code should be in your `if` statement. + +```js +gold = 20; +currentWeapon = 0; +buyWeapon(); +assert.equal(currentWeapon, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md new file mode 100644 index 00000000000..dbd8006158d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md @@ -0,0 +1,208 @@ +--- +id: 62a8ca22d29fe62f3952bdf5 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Increasing a value by 1, or incrementing, has a special operator in JavaScript: `++`. If you wanted to increase `num` by 1, you could write `num++`. + +Change your `currentWeapon` assignment to use the increment operator. + +# --hints-- + +You should use the increment operator to increase `currentWeapon` by `1`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\+\s*\+/); +``` + +You should not use compound assignment to increase `currentWeapon` by `1`. + +```js +assert.notMatch(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon += 1; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md new file mode 100644 index 00000000000..29c3d761fb0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md @@ -0,0 +1,206 @@ +--- +id: 62a8cb19bd7f8a304e5427a1 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Now update the `goldText` element to display the new value of `gold`, and update the `text` element to display `You now have a new weapon.`. + +# --hints-- + +You should update the `innerText` property of the `goldText` element to be `gold`. + +```js +assert.match(buyWeapon.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should update the `innerText` property of the `text` element to be `You now have a new weapon.`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a new weapon\.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md new file mode 100644 index 00000000000..d91e6245ebe --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md @@ -0,0 +1,222 @@ +--- +id: 62a8cbd1e3595431d5a2b3f1 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +You should tell the player what weapon they bought. In between the two lines you just wrote, use `let` to initialize a new variable called `newWeapon`. Set this to equal `weapons`. + +# --hints-- + +Your `buyWeapon` function should have a variable named `newWeapon`. + +```js +assert.match(buyWeapon.toString(), /newWeapon/); +``` + +You should use `let` to declare `newWeapon`. + +```js +assert.match(code, /let\s+newWeapon/); +``` + +`newWeapon` should be initialised to have the value of `weapons`. Don't forget your semi-colon. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons;/); +``` + +`newWeapon` should be declared before you modify `text`. + +```js +const contents = buyWeapon.toString().split(/\s+/); +assert.isBelow(contents.indexOf('newWeapon'), contents.indexOf('text.innerText')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyWeapon, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md new file mode 100644 index 00000000000..165962a1920 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md @@ -0,0 +1,211 @@ +--- +id: 62a8cce1b0c32c33017cf2e9 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For your `newWeapon` variable, use bracket notation to use the `currentWeapon` variable to access an object within the `weapons` array. + +When you use a variable in bracket notation, you are accessing the property or index by the *value* of that variable. + +For example, this code uses the `index` variable to access a value of `array`. + +```js +let value = array[index]; +``` + +# --hints-- + +You should update `newWeapon` to have the value of `weapons[currentWeapon]`. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md new file mode 100644 index 00000000000..7165051ad52 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md @@ -0,0 +1,203 @@ +--- +id: 62a8ce1dfc990134162b3bd9 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +`weapons[currentWeapon]` is an object. Use dot notation to get the `name` property of that object. + +# --hints-- + +You should update `newWeapon` to have the value of `weapons[currentWeapon].name`. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]\.name;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon]; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md new file mode 100644 index 00000000000..4b1f8fb6cb6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md @@ -0,0 +1,222 @@ +--- +id: 62a8ce73d0dce43468f6689c +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +You can insert variables into a string with the concatenation operator `+`. Update the `You now have a new weapon.` string to say `You now have a ` and the name of the new weapon. Remember to end the sentence with a period. + +Here is an example that creates the string `Hello, our name is freeCodeCamp.`: + +```js +const ourName = "freeCodeCamp"; +const ourStr = "Hello, our name is " + ourName + "."; +``` + +# --hints-- + +You should update the `text.innerText` assignment to start with the string `You now have a `. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1/); +``` + +You should use the concatenation operator to add `newWeapon` to the end of the `text.innerText` string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon/); +``` + +You should use the concatenation operator to end your `text.innerText` string with a `.`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon\s*\+\s*('|")\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md new file mode 100644 index 00000000000..748ab4d2f08 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md @@ -0,0 +1,229 @@ +--- +id: 62a8cf22272d6d35af80d4ac +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Back at the beginning of this project, you created the `inventory` array. Add the `newWeapon` to the end of the `inventory` array using the `push()` method. + +Here is an example: + +```js +const arr = ["first"]; +const next = "second"; +arr.push(next); +``` + +`arr` would now have the value `["first", "second"]`. + +# --hints-- + +You should use the `push` method on `inventory`. + +```js +assert.match(buyWeapon.toString(), /inventory\.push/) +``` + +You should `push` the value of `newWeapon` to the `inventory` array. + +```js +assert.match(buyWeapon.toString(), /inventory\.push\s*\(\s*newWeapon\s*\)/) +``` + +Your `buyWeapon` function should add the value of `newWeapon` to the `inventory` array. + +```js +inventory = []; +currentWeapon = 0; +buyWeapon(); +assert.deepEqual(inventory, ["dagger"]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md new file mode 100644 index 00000000000..b7219fb9be1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md @@ -0,0 +1,218 @@ +--- +id: 62a8d0337d7c67377a4a76c6 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Up until now, any time `text.innerText` was updated the old text was erased. This time, use the `+=` operator to add text to the end of `text.innerText`. Add the string ` In your inventory you have: ` - include the spaces at the beginning and the end. + +# --hints-- + +You should add a new line with `text.innerText`. + +```js +const matches = buyWeapon.toString().match(/text\.innerText/g); +assert.lengthOf(matches, 2); +``` + +You should use the `+=` operator to add to `text.innerText`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*/) +``` + +You should add the string ` In your inventory you have: ` to the end of `text.innerText`. Mind the spaces! + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md new file mode 100644 index 00000000000..098be4a56e6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md @@ -0,0 +1,211 @@ +--- +id: 62a8d08668fa8b38732486e9 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +At the end of the second `text.innerText` string you just added, use the concatenation operator to add the contents of `inventory` to the string. + +# --hints-- + +You should not change the ` In your inventory you have: ` string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/) +``` + +You should use the concatenation operator `+` to add the contents of `inventory` to the string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1\s*\+\s*inventory/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: "; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md new file mode 100644 index 00000000000..3ebebb1edd6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md @@ -0,0 +1,226 @@ +--- +id: 62a8d0c4f12c2239b6618582 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add an `else` statement to your `buyWeapon` function. In that statement, set `text.innerText` to equal `You do not have enough gold to buy a weapon.`. + +# --hints-- + +You should add an `else` statement to your `buyWeapon` function. + +```js +assert.match(buyWeapon.toString(), /else/); +``` + +Your `else` statement should come after your `if` statement. + +```js +const split = buyWeapon.toString().split(/\s|\n/); +assert.isAbove(split.indexOf('else'), split.indexOf('if')); +``` + +You should set `text.innerText` to `You do not have enough gold to buy a weapon.`. + +```js +assert.match(buyWeapon.toString(), /text.innerText\s*=\s*('|")You do not have enough gold to buy a weapon.\1/); +``` + +Your `else` statement should set `text.innerText` to `You do not have enough gold to buy a weapon.`. + +```js +gold = 20; +buyWeapon(); +assert.equal(text.innerText, 'You do not have enough gold to buy a weapon.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md new file mode 100644 index 00000000000..1c2b1476e8f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md @@ -0,0 +1,225 @@ +--- +id: 62a8d0fdf2dad83a92883a80 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +Once a player has the best weapon, they cannot buy another one. Wrap all of the code in your `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than `3` - the index of the last weapon. + +# --hints-- + +You should have a new `if` statement that checks if `currentWeapon` is less than `3`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\<\s*3/) +``` + +Your existing `if` statement should be within your new `if` statement. + +```js +currentWeapon = 5; +gold = 50; +buyWeapon(); +assert.equal(gold, 50); +``` + +Your existing `else` statement should be within your new `if` statement. + +```js +currentWeapon = 5; +gold = 10; +buyWeapon(); +assert.notEqual(text.innerText, "You do not have enough gold to buy a weapon."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md new file mode 100644 index 00000000000..a705f22a61f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md @@ -0,0 +1,215 @@ +--- +id: 62a8d143f2a58e3b6d6e9c33 +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Arrays have a `length` property that returns the number of items in the array. You may want to add new values to the `weapons` array in the future. Change your `if` condition to check if `currentWeapon` is less than the length of the `weapons` array. An example of checking the length of an array `myArray` would look like `myArray.length`. + +# --hints-- + +You should use the `length` property on the `weapons` array. + +```js +assert.match(buyWeapon.toString(), /weapons\.length/); +``` + +Your `if` statement should check if `currentWeapon` is less than `weapons.length`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < 3) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md new file mode 100644 index 00000000000..4db3e483fce --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md @@ -0,0 +1,215 @@ +--- +id: 62a8d1c72e8bb13c2074d93c +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +You now have an error to fix. The `currentWeapon` variable is the index of the `weapons` array, but array indexing starts at zero. The index of the last element in an array is one less than the length of the array. Change the `if` condition to check `weapons.length - 1`, instead of `weapons.length`. + +# --hints-- + +You should update the condition to subtract `1` from `weapons.length`. + +```js +assert.match(buyWeapon.toString(), /weapons\.length\s*-\s*1/); +``` + +Your condition should check if `currentWeapon` is less than `weapons.length - 1`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length\s*-\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md new file mode 100644 index 00000000000..2061307615c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md @@ -0,0 +1,224 @@ +--- +id: 62a8d2146a3e853d0a6e28ca +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Add an `else` statement for your outer `if` statement. Inside this new `else` statement, set `text.innerText` to `You already have the most powerful weapon!`. + +# --hints-- + +You should have another `else` statement in your `buyWeapon` function. + +```js +const matches = buyWeapon.toString().match(/else/g); +assert.equal(matches.length, 2); +``` + +You should set `text.innerText` to `You already have the most powerful weapon!`. + +```js +assert.match(buyWeapon.toString(), /('|")You already have the most powerful weapon!\1/); +``` + +You should modify your `text.innerText` to `You already have the most powerful weapon!` within your outer `else` statement. + +```js +currentWeapon = 5; +buyWeapon(); +assert.equal(text.innerText, "You already have the most powerful weapon!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md new file mode 100644 index 00000000000..cd0c1476164 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md @@ -0,0 +1,229 @@ +--- +id: 62a8d24c97461b3ddb9397c8 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Once a player has the most powerful weapon, you can give them the ability to sell their old weapons. In the outer `else` statement, set `button2.innerText` to `Sell weapon for 15 gold`. Also set `button2.onclick` to the function name `sellWeapon`. + +# --hints-- + +You should set the value of `button2.innerText`. + +```js +assert.match(buyWeapon.toString(), /button2\.innerText/); +``` + +You should set the value of `button2.innerText` to `Sell weapon for 15 gold`. + +```js +assert.match(buyWeapon.toString(), /button2\.innerText\s*=\s*('|")Sell weapon for 15 gold\1;/); +``` + +You should set the value of `button2.onclick`. + +```js +assert.match(buyWeapon.toString(), /button2\.onclick/); +``` + +You should set the value of `button2.onclick` to `sellWeapon`. + +```js +assert.match(buyWeapon.toString(), /button2\.onclick\s*=\s*sellWeapon;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md new file mode 100644 index 00000000000..a5e28c829e7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md @@ -0,0 +1,221 @@ +--- +id: 62a8d2e2a073be3edb46116f +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Create an empty `sellWeapon` function. + +# --hints-- + +You should use the `function` keyword to declare a `sellWeapon` variable. + +```js +assert.isFunction(sellWeapon); +``` + +`sellWeapon` should be an empty function. + +```js +assert.match(sellWeapon.toString(), /sellWeapon\(\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md new file mode 100644 index 00000000000..77100cf5462 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md @@ -0,0 +1,223 @@ +--- +id: 62a8d31ebbc10e3fe1b28e03 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Players should not be able to sell their only weapon. Inside the `sellWeapon` function, add an `if` statement with a condition that checks if the length of the `inventory` array is greater than `1`. + +# --hints-- + +Your `sellWeapon` function should have an `if` statement. + +```js +assert.match(sellWeapon.toString(), /if/); +``` + +Your `if` statement should check if `inventory.length` is greater than `1`. + +```js +assert.match(sellWeapon.toString(), /if\s*\(inventory\.length\s*>\s*1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md new file mode 100644 index 00000000000..dbbf432519d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md @@ -0,0 +1,234 @@ +--- +id: 62a8d35660db4040ba292193 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Inside the `if` statement, set `gold` equal to `15` more than its current value. Also update `goldText.innerText` to the new value. + +# --hints-- + +You should use compound assignment to increase `gold` by `15`. + +```js +assert.match(sellWeapon.toString(), /gold\s*\+=\s*15/); +``` + +You should set `goldText.innerText` to `gold`. + +```js +assert.match(sellWeapon.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +Your code should be in your `if` statement. + +```js +inventory = ["Naomi"]; +gold = 0 +sellWeapon(); +assert.equal(gold, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md new file mode 100644 index 00000000000..8f3764e0ef9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md @@ -0,0 +1,223 @@ +--- +id: 62a8d382cd075f4169223e14 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Use the `let` keyword to create a variable named `currentWeapon`. Don't assign it a value yet. + +Notice that you already have a `currentWeapon` variable elsewhere in your code. Since you are using the `let` keyword instead of `var`, the new `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old `currentWeapon` will be used again. + +# --hints-- + +You should use `let` to declare a `currentWeapon` variable. + +```js +assert.match(sellWeapon.toString(), /currentWeapon/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md new file mode 100644 index 00000000000..1fb5303efc5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md @@ -0,0 +1,233 @@ +--- +id: 62a8d539dc11cb42b5dd7ec8 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +The `shift()` method on an array removes the first element in the array and returns it. Use this method to take the first element from the `inventory` array and assign it to your `currentWeapon` variable. + +# --hints-- + +Your `sellWeapon` function should use the `shift()` method. + +```js +assert.match(sellWeapon.toString(), /shift\(\)/); +``` + +You should use the `shift()` method on the `inventory` array. + +```js +assert.match(sellWeapon.toString(), /inventory\.shift\(\)/); +``` + +You should assign the value of `inventory.shift()` to your `currentWeapon` variable. + +```js +assert.match(sellWeapon.toString(), /currentWeapon\s*=\s*inventory\.shift\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md new file mode 100644 index 00000000000..03e5cceea99 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md @@ -0,0 +1,249 @@ +--- +id: 62a8d61ddfe35744369365b7 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +After your `currentWeapon`, use the concatenation operator to set `text.innerText` to the string `You sold a `, then `currentWeapon`, then the string `.`. + +# --hints-- + +You should use the assignment operator with `text.innerText`. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=/); +``` + +You should add `You sold a ` to `text.innerText`. Spacing is important. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1/); +``` + +You should add the value of `currentWeapon` to the `You sold a ` string. Use the concatenation operator to do this on the same line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a\s\1\s*\+\s*\_currentWeapon/); +``` + +You should add the string `.` to the value of `currentWeapon`. Use the concatenation operator to do this on the same line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1\s*\+\s*\_currentWeapon\s+\+\s+('|")\.\2/); +``` + +Your `text.innerText` should update to the proper string. + +```js +inventory = ["first", "second"]; +text.innerText = "Hello"; +sellWeapon(); +assert.equal(text.innerText, "You sold a first."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md new file mode 100644 index 00000000000..bc8435faa22 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md @@ -0,0 +1,243 @@ +--- +id: 62a8d6c7001ebc45350e3d16 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Now use the `+=` operator to add the string ` In your inventory you have: ` and the contents of `inventory` to the `text.innerText`. Make sure to include the space at the beginning and end of the ` In your inventory you have: ` string. + +# --hints-- + +You should add another `text.innerText` line. + +```js +const matches = sellWeapon.toString().match(/text\.innerText/g); +assert.equal(matches.length, 2); +``` + +You should use compound assignment on `text.innerText`. + +```js +const matches = sellWeapon.toString().match(/text\.innerText\s*\+=/g); +assert.equal(matches.length, 1); +``` + +You should add the string ` In your inventory you have: ` to the second `text.innerText` line. Spacing matters. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1/); +``` + +You should use the concatenation operator to add the value of `inventory` to the end of your second `text.innerText` line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1\s*\+\s*inventory/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md new file mode 100644 index 00000000000..3e59ee00a2d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md @@ -0,0 +1,237 @@ +--- +id: 62a8d7b8ab568b4649998954 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Use an `else` statement to run when the `inventory` length is not more than one. Set the `text.innerText` to say `Don't sell your only weapon!`. + +# --hints-- + +Your `sellWeapon` function should have an `else` statement. + +```js +assert.match(sellWeapon.toString(), /else/); +``` + +You should set `text.innerText` to `Don't sell your only weapon!`. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")Don't sell your only weapon!\1/); +``` + +Your new `text.innerText` line should be in your `else` statement. + +```js +inventory = ["Naomi"]; +sellWeapon(); +assert.equal(text.innerText, "Don't sell your only weapon!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md new file mode 100644 index 00000000000..f47ecd3e581 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md @@ -0,0 +1,310 @@ +--- +id: 62a8d81f539f004776dd9b1e +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Now you can start the code to fight monsters. To keep your code organized, your `fightDragon` function has been moved for you to be near the other `fight` functions. + +Below your `weapons` array, define a `monsters` variable and assign it an array. Set that array to have three objects, each with a `name`, `level`, and `health` properties. The first object's values should be `slime`, `2`, and `15`, in order. The second should be `fanged beast`, `8`, and `60`. The third should be `dragon`, `20`, and `300`. + +# --hints-- + +You should use `const` to declare a `monsters` variable. + +```js +assert.match(code, /const\s*monsters/); +``` + +Your `monsters` variable should be an array. + +```js +assert.isArray(monsters); +``` + +Your `monsters` variable should have 3 values. + +```js +assert.lengthOf(monsters, 3); +``` + +Your `monsters` array should have 3 objects. + +```js +assert(monsters.every(val => typeof val === "object")); +``` + +The first value in your `monsters` array should have an object with a `name` property set to `slime`. + +```js +assert.equal(monsters[0].name, "slime"); +``` + +The first value in your `monsters` array should have an object with a `level` property set to `2`. + +```js +assert.equal(monsters[0].level, 2); +``` + +The first value in your `monsters` array should have an object with a `health` property set to `15`. + +```js +assert.equal(monsters[0].health, 15); +``` + +The second value in your `monsters` array should have an object with a `name` property set to `fanged beast`. + +```js +assert.equal(monsters[1].name, "fanged beast"); +``` + +The second value in your `monsters` array should have an object with a `level` property set to `8`. + +```js +assert.equal(monsters[1].level, 8); +``` + +The second value in your `monsters` array should have an object with a `health` property set to `60`. + +```js +assert.equal(monsters[1].health, 60); +``` + +The third value in your `monsters` array should have an object with a `name` property set to `dragon`. + +```js +assert.equal(monsters[2].name, "dragon"); +``` + +The third value in your `monsters` array should have an object with a `level` property set to `20`. + +```js +assert.equal(monsters[2].level, 20); +``` + +The third value in your `monsters` array should have an object with a `health` property set to `300`. + +```js +assert.equal(monsters[2].health, 300); +``` + +You should not add any extra properties to your objects. + +```js +assert.deepEqual(monsters, [ + {name: "slime", level: 2, health: 15}, + {name: "fanged beast", level: 8, health: 60}, + {name: "dragon", level: 20, health: 300} +]) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +--fcc-editable-region-- + +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + +} + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md new file mode 100644 index 00000000000..4167fc0a12b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md @@ -0,0 +1,250 @@ +--- +id: 62a8dd468debb449b4454086 +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +Fighting each type of monster will use similar logic. Create an empty function called `goFight` to manage this logic. + +# --hints-- + +You should use the `function` keyword to declare `goFight`. + +```js +assert.match(code, /function\s*goFight/); +``` + +`goFight` should be an empty function. + +```js +assert.match(goFight.toString(), /goFight\s*\(\s*\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + +} + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md new file mode 100644 index 00000000000..b960134fac7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md @@ -0,0 +1,260 @@ +--- +id: 62a8dd9cdb16324b04cfd958 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +In your `fightSlime` function, set `fighting` equal to `0` - the index of `slime` in the `monsters` array. Remember that you already declared `fighting` earlier in your code, so you do not need `let` or `const` here. + +On the next line, call the `goFight` function. + +# --hints-- + +You should set `fighting` equal to `0`. + +```js +assert.match(fightSlime.toString(), /fighting\s*=\s*0;/); +``` + +You should not use `let` or `const`. + +```js +assert.notMatch(fightSlime.toString(), /let|const|var/); +``` + +You should call the `goFight` function. + +```js +assert.match(fightSlime.toString(), /goFight\(\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +--fcc-editable-region-- +function fightSlime() { + +} +--fcc-editable-region-- + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function goFight() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md new file mode 100644 index 00000000000..aa331ca8991 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md @@ -0,0 +1,259 @@ +--- +id: 62a8dfcf7fb1044d2f478fd1 +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Following the same pattern, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also remove the `console.log` call from your `fightDragon` function. + +# --hints-- + +You should set `fighting` to `1` in your `fightBeast` function. + +```js +assert.match(fightBeast.toString(), /fighting\s*=\s*1;/); +``` + +You should set `fighting` to `2` in your `fightDragon` function. + +```js +assert.match(fightDragon.toString(), /fighting\s*=\s*2;/); +``` + +You should remove the `console.log` from your `fightDragon` function. + +```js +assert.notMatch(fightDragon.toString(), /console\.log/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +--fcc-editable-region-- +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} +--fcc-editable-region-- + +function goFight() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md new file mode 100644 index 00000000000..5eccfafdc9b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md @@ -0,0 +1,269 @@ +--- +id: 62a8e0d1d0110b4ec421489f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +At the end of your code, create two empty functions named `attack` and `dodge`. + +# --hints-- + +You should use the `function` keyword to declare `attack`. + +```js +assert.match(code, /function\s*attack/); +``` + +`attack` should be an empty function. + +```js +assert.match(attack.toString(), /attack\s*\(\s*\)\s*\{\s*\}/); +``` + +You should use the `function` keyword to declare `dodge`. + +```js +assert.match(code, /function\s*dodge/); +``` + +`dodge` should be an empty function. + +```js +assert.match(dodge.toString(), /dodge\s*\(\s*\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md new file mode 100644 index 00000000000..70d0725b1d9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md @@ -0,0 +1,288 @@ +--- +id: 62a8e142f7f0bd4fed898de3 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Add a new object to the end of the `locations` array, following the same properties as the rest of the objects. Set `name` to `fight`, `button text` to an array with `Attack`, `Dodge`, and `Run`, `button functions` to an array with `attack`, `dodge`, and `goTown`, and `text` to `You are fighting a monster.`. + +# --hints-- + +Your `locations` array should have 4 values in it. + +```js +console.log(locations); +assert.lengthOf(locations, 4); +``` + +Your new value should be an object. + +```js +assert.isObject(locations[3]); +``` + +Your new object should have a `name` property set to `fight`. + +```js +assert.equal(locations[3].name, "fight"); +``` + +Your new object should have a `button text` property set to an array with the strings `Attack`, `Dodge`, and `Run`. + +```js +assert.deepEqual(locations[3]["button text"], ["Attack", "Dodge", "Run"]); +``` + +Your new object should have a `button functions` property set to an array with the variables `attack`, `dodge`, and `goTown`. + +```js +assert.deepEqual(locations[3]["button functions"], [attack, dodge, goTown]); +``` + +Your new object should have a `text` property set to `You are fighting a monster.`. + +```js +assert.equal(locations[3].text, "You are fighting a monster."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + +} + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md new file mode 100644 index 00000000000..d87c8179a6e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md @@ -0,0 +1,269 @@ +--- +id: 62a8e1dc897df55108bcb5e8 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +In the `goFight` function, call your `update` function with the fourth object in `locations` as an argument. + +# --hints-- + +You should call `update` in your `goFight` function. + +```js +assert.match(goFight.toString(), /update/); +``` + +You should pass the fourth object in your `locations` array to your `update` call. + +```js +assert.match(goFight.toString(), /update\(locations\[3\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md new file mode 100644 index 00000000000..ec221bb2490 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md @@ -0,0 +1,270 @@ +--- +id: 62a8e21398ad61520edb724f +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Below your `update` call, set the `monsterHealth` to be the health of the current monster. You can get this value by accessing the `health` property of `monsters[fighting]`. + +# --hints-- + +You should use bracket notation to access the `monsters` array at the `fighting` index. + +```js +assert.match(goFight.toString(), /monsters\[fighting\]/); +``` + +You should assign the value of `monsters[fighting]` to the `monsterHealth` variable. + +```js +assert.match(goFight.toString(), /monsterHealth\s*=\s*monsters\[fighting\](\.health|\[('|")health\2\])/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md new file mode 100644 index 00000000000..64379cb2b5d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md @@ -0,0 +1,281 @@ +--- +id: 62a8e24c673b075317cc0b09 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +The HTML element that shows the monster's stats has been hidden with CSS. Display the `monsterStats` element by updating the `display` property of the `style` property to `block`. For example, updating the `first` property of the `name` property of `user` would look like: + +```js +user.name.first = "Naomi"; +``` + +# --hints-- + +You should use dot notation to access the `style` property of `monsterStats`. + +```js +assert.match(goFight.toString(), /monsterStats\.style/); +``` + +You should use dot notation to access the `display` property of the `style` property. + +```js +assert.match(goFight.toString(), /monsterStats\.style\.display/); +``` + +You should set the `display` property to `block`. + +```js +assert.match(goFight.toString(), /monsterStats\.style\.display\s*=\s*('|")block\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md new file mode 100644 index 00000000000..0ccd9de7c1a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md @@ -0,0 +1,284 @@ +--- +id: 62a8e271f8e3d1541f9624ad +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Now set the `innerText` property of `monsterName` to be the `name` property of the current monster. Do the same for `monsterHealthText` and the `health` property. + +# --hints-- + +You should use dot notation to access the `innerText` property of `monsterName`. + +```js +assert.match(goFight.toString(), /monsterName\.innerText/); +``` + +You should set the `innerText` property of `monsterName` to be the `name` value of the current monster. Remember that you can get the current monster with `monsters[fighting]`. + +```js +assert.match(goFight.toString(), /monsterName\.innerText\s*=\s*monsters\[fighting\]\.name/); +``` + +You should use dot notation to access the `innerText` property of `monsterHealthText`. + +```js +assert.match(goFight.toString(), /monsterHealthText\.innerText/); +``` + +You should set the `innerText` property of `monsterHealthText` to be the `health` value of the current monster. Remember that you assigned this value to a `monsterHealth` variable. + +```js +assert.match(goFight.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md new file mode 100644 index 00000000000..229ca08f2a2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md @@ -0,0 +1,285 @@ +--- +id: 62a8e35675c18c56354c08cf +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Now you can build the `attack` function. First, update the `text` message to say `The [monster name] attacks.`, replacing `[monster name]` with the name of the monster. Remember you can use the concatenation operator for this. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text`. + +```js +assert.match(attack.toString(), /text\.innerText/); +``` + +You should assign the string `The ` to `innerText` property of `text`. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1/); +``` + +You should use the concatenation operator to add the value of `monsters[fighting].name` to the `The ` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name/); +``` + +You should use the concatenation operator to add the string ` attacks.` to the `monsters[fighting].name` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name\s*\+\s*('|") attacks\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md new file mode 100644 index 00000000000..6566de3802a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md @@ -0,0 +1,293 @@ +--- +id: 62a8e41e2f190c58404dd46e +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +On a new line, add the string ` You attack it with your [weapon].` to the `text` value, replacing `[weapon]` with the player's current weapon. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text` on a new line. + +```js +const match = attack.toString().match(/text\.innerText/g); +assert.lengthOf(match, 2); +``` + +You should use compound assignment with `text.innerText`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=/); +``` + +You should add the string ` You attack it with your ` to the `text.innerText` value. Remember that spacing matters. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1/); +``` + +You should use the concatenation operator to add the current weapon to the string. You can get the current weapon with `weapons[currentWeapon].name`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name/); +``` + +You should use the concatenation operator to end your string with `.`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name\s*\+\s*('|")\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md new file mode 100644 index 00000000000..7ebd6d5383a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md @@ -0,0 +1,275 @@ +--- +id: 62a8e45cc600c3591cee671a +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Next, set `health` to equal `health` minus the monster's level. Remember you can get this from the `monsters[fighting].level` property. + +# --hints-- + +You should use compound assignment with `health`. + +```js +assert.match(attack.toString(), /health\s*-=/); +``` + +You should subtract the monster's current level from `health`. + +```js +assert.match(attack.toString(), /health\s*-=\s*monsters\[fighting\]\.level/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md new file mode 100644 index 00000000000..687f2f04e57 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md @@ -0,0 +1,288 @@ +--- +id: 62a8e49f4df7af5ae2d7a616 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember you have the `currentWeapon` variable and the `power` property. + +# --hints-- + +You should use compound assignment to modify the `monsterHealth` variable. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=/); +``` + +You should use bracket notation with `currentWeapon` to access `weapons`. + +```js +assert.match(attack.toString(), /weapons\[currentWeapon\]/); +``` + +You should use dot notation to access the `power` property of `weapons[currentWeapon]`. + +```js +assert.match(attack.toString(), /weapons\[currentWeapon\]\.power/); +``` + +You should subtract the `power` of the current weapon from `monsterHealth`. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md new file mode 100644 index 00000000000..fe85bcd7f75 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md @@ -0,0 +1,316 @@ +--- +id: 62a8e4dc6a60f85bf256a0cb +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +JavaScript offers the built-in `Math` utility which offers a number of mathematical tools. One of those is `Math.random()`, which generates a random number between 0 and 1. Another is `Math.floor()`, which rounds a given number down to the nearest integer. + +Using these, you can generate a random number within a range. For example, this generates a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1;`. + +Following this pattern, add a random number between one and the value of `xp` at the end of your `monsterHealth` variable change. + +# --hints-- + +You should use the same `monsterHealth` line you already wrote. + +```js +assert.lengthOf(attack.toString().match(/monsterHealth/g), 1); +``` + +You should add to the `weapons[currentWeapon].power` value. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+/); +``` + +You should use `Math.floor()`. + +```js +assert.match(attack.toString(), /Math\.floor/); +``` + +You should use `Math.random()`. + +```js +assert.match(attack.toString(), /Math\.random/); +``` + +You should multiply `Math.random()` by the value of `xp`. + +```js +assert.match(attack.toString(), /Math\.random\(\)\s*\*\s*xp/); +``` + +You should use `Math.floor()` to round the result of `Math.random() * xp` down. + +```js +assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)/); +``` + +You should add `1` to the result of `Math.floor()`. + +```js +assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/); +``` + +You should add the result of `Math.floor(Math.random() * xp) + 1` to the result of `weapons[currentWeapon].power`. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power; +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md new file mode 100644 index 00000000000..a2c6fde768a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md @@ -0,0 +1,289 @@ +--- +id: 62a8ed36d7a7915dfa444ba2 +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`. + +# --hints-- + +You should update `healthText.innerText`. + +```js +assert.match(attack.toString(), /healthText\.innerText/); +``` + +You should set `healthText.innerText` to `health`. + +```js +assert.match(attack.toString(), /healthText\.innerText\s*=\s*health/); +``` + +You should update `monsterHealthText.innerText`. + +```js +assert.match(attack.toString(), /monsterHealthText\.innerText/); +``` + +You should set `monsterHealthText.innerText` to `monsterHealth`. + +```js +assert.match(attack.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md new file mode 100644 index 00000000000..acf1efd38b0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md @@ -0,0 +1,285 @@ +--- +id: 62a8edd05e27cc668051686f +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +Add an `if` statement to check if `health` is less than or equal to `0`. If it is, call the `lose` function. + +# --hints-- + +Your `attack` function should have an `if` statement. + +```js +assert.match(attack.toString(), /if/); +``` + +Your `if` statement should check if `health` is less than or equal to `0`. + +```js +assert.match(attack.toString(), /if\s*\(health\s*<=\s*0\)/); +``` + +Your `if` statement should call the `lose` function. + +```js +assert.match(attack.toString(), /lose\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md new file mode 100644 index 00000000000..ac058ac03bc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md @@ -0,0 +1,297 @@ +--- +id: 62a8ee154c8946678775c4a4 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +You can make an `else` statement conditional by using `else if`. At the end of your `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to `0`. In your `else if`, call the `defeatMonster` function. + +Here's an example: + +```js +if (num > 10) { + +} else if (num < 5) { + +} +``` + +# --hints-- + +You should have an `else if` statement. + +```js +assert.match(attack.toString(), /else if/); +``` + +Your `else if` statement should check if `monsterHealth` is less than or equal to `0`. + +```js +assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)/); +``` + +Your `else if` statement should call the `defeatMonster` function. + +```js +assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)\s*\{\s*defeatMonster/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md new file mode 100644 index 00000000000..94244500db9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md @@ -0,0 +1,297 @@ +--- +id: 62a8ee71f018e968a056d369 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +At the end of your code, create the `defeatMonster` and `lose` functions. Leave them empty for now. + +# --hints-- + +You should use the `function` keyword to declare `defeatMonster`. + +```js +assert.match(code, /function\s+defeatMonster/); +``` + +`defeatMonster` should be an empty function. + +```js +assert.match(defeatMonster.toString(), /defeatMonster\s*\(\)\s*\{\s*\}/); +``` + +You should use the `function` keyword to declare `lose`. + +```js +assert.match(code, /function\s+lose/); +``` + +`lose` should be an empty function. + +```js +assert.match(lose.toString(), /lose\s*\(\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md new file mode 100644 index 00000000000..3524f53b4a3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md @@ -0,0 +1,291 @@ +--- +id: 62a8eec45f77bc69e8775294 +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Inside the `dodge` function, set `text.innerText` equal to the string `You dodge the attack from the [monster]`. Replace `[monster]` with the name of the monster, using the `name` property. + +# --hints-- + +You should assign the string `You dodge the attack from the ` to the `text.innerText` property. Remember that spacing matters. + +```js +assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/); +``` + +You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`. + +```js +assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +--fcc-editable-region-- +function dodge() { + +} +--fcc-editable-region-- + +function defeatMonster() { + +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md new file mode 100644 index 00000000000..f67c008aa05 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md @@ -0,0 +1,299 @@ +--- +id: 62a8eefe2e68b66ac563816b +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +In your `defeatMonster` function, set `gold` equal to `gold` plus the monster's level times `6.7`. You can get the monster's level with the `level` property. + +Here is an example of setting `num` to `num` plus `5` * `8`: `num += 5 * 8`. Use `Math.floor()` to round the result down. + +# --hints-- + +You should use compound assignment to modify `gold`. + +```js +assert.match(defeatMonster.toString(), /gold\s*\+=/); +``` + +You should use `Math.floor()` to round the result of the monster's level times `6.7`. + +```js +assert.match(defeatMonster.toString(), /Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/); +``` + +You should add the result of `Math.floor(gold + monsters[fighting].level * 6.7)` to `gold`. + +```js +assert.match(defeatMonster.toString(), /gold\s*\+=\s*Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md new file mode 100644 index 00000000000..678fd1314fc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md @@ -0,0 +1,292 @@ +--- +id: 62a8ef6a52292f6bdca4f6f8 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Set `xp` to `xp` plus the monster's level. + +# --hints-- + +You should use compound assignment to modify `xp`. + +```js +assert.match(defeatMonster.toString(), /xp\s*\+=/); +``` + +You should add the monster's level to `xp`. + +```js +assert.match(defeatMonster.toString(), /xp\s*\+=\s*monsters\[fighting\]\.level/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md new file mode 100644 index 00000000000..cb9eadcb3ec --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md @@ -0,0 +1,293 @@ +--- +id: 62a8ef8f0c76a46cd221a68c +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +Now update `goldText` and `xpText` to display the updated values. + +# --hints-- + +You should update `goldText.innerText` to the value of `gold`. + +```js +assert.match(defeatMonster.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should update `xpText.innerText` to the value of `xp`. + +```js +assert.match(defeatMonster.toString(), /xpText\.innerText\s*=\s*xp/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md new file mode 100644 index 00000000000..ca92f837431 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md @@ -0,0 +1,295 @@ +--- +id: 62a8efb0e3ce826db8daf80f +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Finish the `defeatMonster` function by calling the `update` function with `locations[4]` as the argument. + +# --hints-- + +You should call the `update` function. + +```js +assert.match(defeatMonster.toString(), /update/); +``` + +You should pass `locations[4]` as the argument. + +```js +assert.match(defeatMonster.toString(), /update\(locations\[4\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md new file mode 100644 index 00000000000..dd0068655fd --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md @@ -0,0 +1,319 @@ +--- +id: 62a8eff21c0b0f6ebe5b8e38 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Your `locations` array doesn't have a fifth element, so `locations[4]` doesn't work. Add a new object at the end of the `locations` array, following the same structure as the other objects. Set `name` to `kill monster`, set `button text` to an array with three `Go to town square` strings, set `button functions` to an array with three `goTown` variables, and set `text` to `The monster screams Arg! as it dies. You gain experience points and find gold.`. + +# --hints-- + +Your `locations` array should have five values. + +```js +assert.lengthOf(locations, 5); +``` + +Your fifth `locations` value should be an object. + +```js +assert.isObject(locations[4]); +``` + +Your fifth `locations` value should have a `name` property with the value `kill monster`. + +```js +assert.equal(locations[4].name, 'kill monster'); +``` + +Your fifth `locations` value should have a `button text` property with the value an array with three `Go to town square` strings. + +```js +assert.deepEqual(locations[4]["button text"], ['Go to town square', 'Go to town square', 'Go to town square']); +``` + +Your fifth `locations` value should have a `button functions` property with the value an array with three `goTown` variables. + +```js +assert.deepEqual(locations[4]["button functions"], [goTown, goTown, goTown]); +``` + +Your fifth `locations` value should have a `text` property with the value `The monster screams Arg! as it dies. You gain experience points and find gold.`. + +```js +assert.equal(locations[4].text, 'The monster screams Arg! as it dies. You gain experience points and find gold.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md new file mode 100644 index 00000000000..ad30c67858d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md @@ -0,0 +1,301 @@ +--- +id: 62a8f06fb318666fef69f91e +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The word `Arg!` should have quotes around it. Besides escaping quotes, there is another way you can include quotation marks inside a string. Change the double quotes around the string `The monster screams Arg! as it dies. You gain experience points and find gold.` to single quotes `'`, then add double quotes around `Arg!`. + +# --hints-- + +You should use single quotes around the string. + +```js +assert.match(code, /'The monster screams "?Arg!"? as it dies. You gain experience points and find gold.'/); +``` + +You should use double quotes around `Arg!`. + +```js +assert.equal(locations[4].text, 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, +--fcc-editable-region-- + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: "The monster screams Arg! as it dies. You gain experience points and find gold." + } +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md new file mode 100644 index 00000000000..ee850581fa7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md @@ -0,0 +1,308 @@ +--- +id: 62a8f14fe6d1fc72454648c7 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +After a monster is defeated, the monster's stat box should no longer display. On the first line of the `update` function, use `monsterStats.style.display` to change the `display` value to `none`. + +# --hints-- + +You should use `monsterStats.style.display` in the `update` function. + +```js +assert.match(update.toString(), /monsterStats\.style\.display/); +``` + +You should set `monsterStats.style.display` to `none`. + +```js +assert.match(update.toString(), /monsterStats\.style\.display\s*=\s*('|")none\1/); +``` + +This should be the first line of the `update` function. + +```js +assert.match(update.toString(), /update\s*\(\s*location\s*\)\s*\{\s*monsterStats\.style\.display\s*=\s*('|")none\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md new file mode 100644 index 00000000000..de99851e153 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md @@ -0,0 +1,296 @@ +--- +id: 62a8f1d5f5ddbf74c07f733b +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +In the `lose` function, call the `update` function and pass in the sixth object of your `locations` array. Note that you haven't created this object just yet. + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +--fcc-editable-region-- +function lose() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md new file mode 100644 index 00000000000..097ae332be3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md @@ -0,0 +1,356 @@ +--- +id: 62a8f20463b324759953edad +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +At the end of your code, create a `restart` function. Inside this function, set `xp` to `0`, `health` to `100`, `gold` to `50`, `currentWeapon` to `0`, and set `inventory` to an array with the string `stick`. + +Also update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values. + +Finally, call the `goTown()` function. + +# --hints-- + +You should use the `function` keyword to declare `restart`. + +```js +assert.match(code, /function\s+restart/); +``` + +Your `restart` function should set `xp` to `0`. + +```js +assert.match(restart.toString(), /xp\s*=\s*0/); +``` + +Your `restart` function should set `health` to `100`. + +```js +assert.match(restart.toString(), /health\s*=\s*100/); +``` + +Your `restart` function should set `gold` to `50`. + +```js +assert.match(restart.toString(), /gold\s*=\s*50/); +``` + +Your `restart` function should set `currentWeapon` to `0`. + +```js +assert.match(restart.toString(), /currentWeapon\s*=\s*0/); +``` + +Your `restart` function should set `inventory` to an array with the string `stick`. + +```js +assert.match(restart.toString(), /inventory\s*=\s*\[\s*('|")stick\1\s*\]/); +``` + +Your `restart` function should call the `goTown()` function. + +```js +assert.match(restart.toString(), /goTown\(\)/); +``` + +You should set `goldText.innerText` to the value of `gold`. + +```js +assert.match(restart.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should set `healthText.innerText` to the value of `health`. + +```js +assert.match(restart.toString(), /healthText\.innerText\s*=\s*health/); +``` + +You should set `xpText.innerText` to the value of `xp`. + +```js +assert.match(restart.toString(), /xpText\.innerText\s*=\s*xp/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md new file mode 100644 index 00000000000..84ad6a8fbc2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md @@ -0,0 +1,353 @@ +--- +id: 62a8f256b813a476cae51f49 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block. + +Here is an example that checks if `num` is equal to `5`: + +```js +if (num === 5) { + +} else { + +} +``` + +# --hints-- + +You should add a new `if` statement in your `else if` block. + +```js +const block = attack.toString().split("else if"); +assert.include(block[1], "if"); +``` + +Your new `if` statement should check if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)/); +``` + +You should call the `winGame` function in your `if` block. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)\s*\{\s*winGame\(\)/); +``` + +You should add an `else` block. + +```js +const block = attack.toString().split("else if"); +assert.include(block[1], "else"); +``` + +Your `else` block should call the `defeatMonster` function. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /else\s*\{\s*defeatMonster\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md new file mode 100644 index 00000000000..cd564871491 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md @@ -0,0 +1,355 @@ +--- +id: 62a8f2bc37675e77d5835235 +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. + +Here is an example of an `if-else` expression changed to a ternary: + +```js +if (num > 5) { + bigger() +} else { + smaller() +} + +num > 5 ? bigger() : smaller(); +``` + +Change your new `if-else` expression to a ternary. + +# --hints-- + +You should remove the `if` and `else` from your `else if` block. + +```js +const block = attack.toString().split("else if"); +assert.notMatch(block[1], /if/); +assert.notMatch(block[1], /else/); +``` + +You should check if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2/); +``` + +Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); +``` + +Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + if (fighting === 2) { + winGame(); + } else { + defeatMonster(); + } + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md new file mode 100644 index 00000000000..6cf34e927c5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md @@ -0,0 +1,322 @@ +--- +id: 62a8f35bde1750791f58773f +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +After the `lose` function, create a function called `winGame`. Inside the `winGame` function, call the `update` function and pass in `locations[6]`. + +# --hints-- + +You should use the `function` keyword to declare `winGame`. + +```js +assert.match(code, /function\s+winGame/); +``` + +Your `winGame` function should call the `update` function and pass in `locations[6]`. + +```js +assert.match(winGame.toString(), /update\s*\(\s*locations\[6\]\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md new file mode 100644 index 00000000000..8522ebd7445 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md @@ -0,0 +1,348 @@ +--- +id: 62a94114ce0b8918b487390f +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Add another object in the `locations` array. Everything should be the same as the `lose` object, except the `name` should be `win` and the `text` should be `You defeat the dragon! YOU WIN THE GAME! 🎉`. + +# --hints-- + +You should have seven values in the `locations` array. + +```js +assert.lengthOf(locations, 7); +``` + +Your seventh `locations` value should be an object. + +```js +assert.isObject(locations[6]); +``` + +Your seventh `locations` value should have a `name` property with the value `win`. + +```js +assert.equal(locations[6].name, 'win'); +``` + +Your seventh `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings. + +```js +assert.deepEqual(locations[6]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']); +``` + +Your seventh `locations` value should have a `button functions` property with the value an array with three `restart` variables. + +```js +assert.deepEqual(locations[6]["button functions"], [restart, restart, restart]); +``` + +Your seventh `locations` value should have a `text` property with the value `You defeat the dragon! YOU WIN THE GAME! 🎉`. + +```js +assert.equal(locations[6].text, 'You defeat the dragon! YOU WIN THE GAME! 🎉'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md new file mode 100644 index 00000000000..d38e7a2c1e2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md @@ -0,0 +1,326 @@ +--- +id: 62aa1cea594f152ba626b872 +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Your game could be complete now, but you can also make it more interesting. + +Inside your `attack` function, change your `health -= monsters[fighting].level;` line to `health -= getMonsterAttackValue(monsters[fighting].level);`. This sets `health` equal to `health` minus the return value of the `getMonsterAttackValue` function, and passes the `level` of the monster as an argument. + +# --hints-- + +You should update your `health` line to be `health -= getMonsterAttackValue(monsters[fighting].level);`. + +```js +assert.match(attack.toString(), /health\s*-=\s*getMonsterAttackValue\(monsters\[fighting\].level\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md new file mode 100644 index 00000000000..1dd06a164f4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md @@ -0,0 +1,332 @@ +--- +id: 62aa1d6736ba262cfa74344b +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Below your `attack` function, create an empty function named `getMonsterAttackValue`. It should take `level` as a parameter. + +# --hints-- + +You should use the `function` keyword to declare `getMonsterAttackValue`. + +```js +assert.match(code, /function\s+getMonsterAttackValue/); +``` + +Your `getMonsterAttackValue` should take `level` as a parameter. + +```js +assert.match(code, /getMonsterAttackValue\(\s*level\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md new file mode 100644 index 00000000000..62f2bd62862 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md @@ -0,0 +1,342 @@ +--- +id: 62aa1d9f535e102e4663e7a6 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +The attack of the monster will be based on the monster's `level` and the player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Assign it the equation `(level * 5) - (Math.floor(Math.random() * xp));`. + +This will set the monster's attack to five times their `level` minus a random number between 0 and the player's `xp`. + +# --hints-- + +You should use `const` to declare the variable `hit`. + +```js +assert.match(code, /const\s*hit/); +``` + +You should use the equation `(level * 5) - (Math.floor(Math.random() * xp))`. + +```js +assert.match(getMonsterAttackValue, /(level\s*\*\s*5)\s*-\s*(Math.floor\(Math.random\(\)\s*\*\s*xp\))/); +``` + +You should set `hit` to the value of `(level * 5) - (Math.floor(Math.random() * xp))`. + +```js +assert.match(code, /hit\s*=\s*\(level\s*\*\s*5\)\s*-\s*\(Math.floor\(Math.random\(\)\s*\*\s*xp\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md new file mode 100644 index 00000000000..0e1f69267c5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md @@ -0,0 +1,328 @@ +--- +id: 62aa1e3c7c3d552fb04f0f18 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Log the value of `hit` to the console to use in debugging. Remember that you can do this with `console.log()`. + +# --hints-- + +You should use the `console.log()` function to log the value of `hit`. + +```js +assert.match(getMonsterAttackValue.toString(), /console\.log\(\s*hit\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md new file mode 100644 index 00000000000..bcc2b14ee5a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md @@ -0,0 +1,338 @@ +--- +id: 62aa1e8ccd579330e097ce44 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +Functions run specific blocks of code when they are called, but they can also return a value. This value can be assigned to a variable and used elsewhere in your code. + +Use the `return` keyword to return the value of `hit` at the end of the function. + +# --hints-- + +You should use the `return` keyword to return the value of `hit`. + +```js +assert.match(getMonsterAttackValue, /return\s*hit/); +``` + +Your function should return the expected value. + +```js +xp = 0; +assert.equal(getMonsterAttackValue(1), 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md new file mode 100644 index 00000000000..725aa7e720a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md @@ -0,0 +1,350 @@ +--- +id: 62aa1eec891ed731db227a36 +title: Step 147 +challengeType: 0 +dashedName: step-147 +--- + +# --description-- + +If you play the game in its current state you might notice a bug. If your `xp` is high enough, the `getMonsterAttackValue` function will return a negative number, which will actually add to your total health when fighting a monster! + +In `getMonsterAttackValue`, change `return hit` to a ternary operator that returns `hit` if `hit` is greater than `0`, or returns `0` if it is not. + +Here is an example of returning a value based on `condition` with a ternary: + +```js +return condition ? true : false; +``` + +# --hints-- + +You should use a ternary to change the `return` value if `hit` is greater than `0`. + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0/); +``` + +You should use a ternary to return `hit` if `hit` is greater than `0` + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit/); +``` + +You should use a ternary to return `0` if `hit` is not greater than `0`. + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit\s*:\s*0/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit; +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md new file mode 100644 index 00000000000..97ce39a4821 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md @@ -0,0 +1,331 @@ +--- +id: 62aa1fed3d4e873366ff3131 +title: Step 148 +challengeType: 0 +dashedName: step-148 +--- + +# --description-- + +In your `attack` function, below the `health` variable create an `if` statement. Set the condition to call the `isMonsterHit` function. + +# --hints-- + +You should add an `if` statement which calls `isMonsterHit` in the condition. + +```js +assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\s*\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md new file mode 100644 index 00000000000..3e9df421573 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md @@ -0,0 +1,333 @@ +--- +id: 62aa204c1e1d33348ff09944 +title: Step 149 +challengeType: 0 +dashedName: step-149 +--- + +# --description-- + +Move your `monsterHealth` assignment into your `if` block. + +# --hints-- + +You should move your `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1` into your `if` block. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + + } + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md new file mode 100644 index 00000000000..88836e37794 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md @@ -0,0 +1,338 @@ +--- +id: 62aa20e9cf1be9358f5aceae +title: Step 150 +challengeType: 0 +dashedName: step-150 +--- + +# --description-- + +Add an `else` statement to your `if` statement. In the `else` statement, use the `+=` operator to add the text ` You miss.` to the end of `text.innerText`. + +# --hints-- + +You should add an `else` block after your `if (isMonsterHit())` block. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/) +``` + +You should add the text ` You miss.` to the end of `text.innerText`. Remember to use compound assignment. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md new file mode 100644 index 00000000000..7a5d427b22f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md @@ -0,0 +1,342 @@ +--- +id: 62aa2136fc49b836dfedb959 +title: Step 151 +challengeType: 0 +dashedName: step-151 +--- + +# --description-- + +Now create the `isMonsterHit` function. This will return a boolean value (true or false) to be used in your `if` statement. Return the result of the comparison `Math.random() > .2`. + +# --hints-- + +You should use the `function` keyword to declare `isMonsterHit`. + +```js +assert.match(code, /function\s+isMonsterHit/); +``` + +Your `isMonsterHit` function should return the result of the comparison `Math.random() > .2`. + +```js +assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md new file mode 100644 index 00000000000..2db80762083 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md @@ -0,0 +1,354 @@ +--- +id: 62aa21971e3b743844849985 +title: Step 152 +challengeType: 0 +dashedName: step-152 +--- + +# --description-- + +The player should hit if either `Math.random() > .2` **or** if the player's health is less than 20. At the end of your `return` statement, use the logical or operator `||` and check if `health` is less than `20`. + +The logical or operator will use the first value if it is truthy, otherwise it will use the second value. + +For example: `num < 10 || num > 20`. + +# --hints-- + +Your `isMonsterHit` function should use the logical or operator. + +```js +assert.match(isMonsterHit.toString(), /\|\|/); +``` + +Your logical or operator should use `health < 20` as the fallback value. + +```js +assert.match(isMonsterHit.toString(), /\|\|\s*health\s*<\s*20/); +``` + +Your function should return the result of the comparison `Math.random() > .2` **or** `health < 20`. + +```js +assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2\s*\|\|\s*health\s*<\s*20/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +--fcc-editable-region-- +function isMonsterHit() { + return Math.random() > .2; +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md new file mode 100644 index 00000000000..34820846dd6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md @@ -0,0 +1,346 @@ +--- +id: 62aa21ea8d9d9f396b95dd87 +title: Step 153 +challengeType: 0 +dashedName: step-153 +--- + +# --description-- + +On every attack, there should be a chance that the player's weapon breaks. At the end of the `attack` function, add an empty `if` expression with the condition `Math.random() <= .1`. + +# --hints-- + +You should add an `if` statement to your `attack` function. + +```js +const ifs = attack.toString().match(/if/g); +assert.lengthOf(ifs, 4); +``` + +Your new `if` statement should check `Math.random() <= .1`. + +```js +assert.match(attack.toString(), /if\s*\(\s*Math\.random\(\)\s*<=\s*0?\.1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md new file mode 100644 index 00000000000..4210b69f7a8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md @@ -0,0 +1,367 @@ +--- +id: 62aa226207f33d3ad4c6f546 +title: Step 154 +challengeType: 0 +dashedName: step-154 +--- + +# --description-- + +Use the `+=` operator to add ` Your [weapon] breaks.` to the end of `text.innerText`, replacing `weapon` with the last item in the `inventory` array. You can get this last item by using `inventory.pop()`, which will remove the last item in the array AND return it so it appears in your string. + +# --hints-- + +You should use the compound assignment operator to modify `text.innerText`. + +```js +const concat = attack.toString().match(/\+=/g); +assert.lengthOf(concat, 3); +``` + +You should use the `pop` method on the `inventory` array. + +```js +assert.match(attack.toString(), /inventory\.pop\(\)/); +``` + +You should add the string " Your " to `text.innerText`. Remember that spacing matters. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1/); +``` + +You should add the return value of `inventory.pop()` to the ` Your ` string. + +```js +console.log(attack.toString()); +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)/); +``` + +You should add ` breaks.` to the ` "Your " + inventory.pop()` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)\s*\+\s*('|")\sbreaks\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md new file mode 100644 index 00000000000..44980b592f0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md @@ -0,0 +1,350 @@ +--- +id: 62aa22aba186563bcbf2c395 +title: Step 155 +challengeType: 0 +dashedName: step-155 +--- + +# --description-- + +Remember that the increment operator `++` can be used to increase a variable's value by 1. There is also a decrement operator `--` that can be used to decrease a variable's value by 1. + +Decrement the value of `currentWeapon` in your `if` statement, after you update the text. + +# --hints-- + +You should use the decrement operator. + +```js +assert.match(attack.toString(), /--/); +``` + +You should decrement `currentWeapon` in your `if` statement. + +```js +assert.match(attack.toString(), /currentWeapon\s*--/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md new file mode 100644 index 00000000000..65fc9cd5576 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md @@ -0,0 +1,364 @@ +--- +id: 62aa234322d4ad3e8bce42cc +title: Step 156 +challengeType: 0 +dashedName: step-156 +--- + +# --description-- + +We don't want a player's only weapon to break. The logical or operator checks if two statements are true. + +Use the logical and operator `&&` to add a second condition to your `if` statement. The player's weapon should only break if `inventory.length` does not equal (`!==`) one. + +Here is an example of an `if` statement with two conditions: + +```js +if (firstName === "Quincy" && lastName === "Larson") { + +} +``` + +# --hints-- + +You should not modify your existing `if` statement. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1/); +``` + +You should use the logical and operator `&&`. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&/); +``` + +You should use the logical and operator to check if `inventory.length` does not equal `1`. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&\s*inventory\.length\s*\!\=\=\s*1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md new file mode 100644 index 00000000000..10cb8603022 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md @@ -0,0 +1,358 @@ +--- +id: 62aa2469c77b363fdb4f0e06 +title: Step 157 +challengeType: 0 +dashedName: step-157 +--- + +# --description-- + +Now you can add a small easter egg (hidden feature) to your game. + +Create a new function called `easterEgg` which calls the `update` function with `locations[7]` as the argument. + +# --hints-- + +You should use the `function` keyword to declare `easterEgg`. + +```js +assert.match(code, /function\s+easterEgg\s*/); +``` + +`easterEgg` should call the `update` function. + +```js +assert.match(easterEgg.toString(), /update\(/); +``` + +`easterEgg` should call the `update` function with `locations[7]` as the argument. + +```js +assert.match(easterEgg.toString(), /update\(\s*locations\[7\]\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md new file mode 100644 index 00000000000..a502101c334 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md @@ -0,0 +1,355 @@ +--- +id: 62aa252c3b1073415ba2b898 +title: Step 158 +challengeType: 0 +dashedName: step-158 +--- + +# --description-- + +Create an empty `pick` function with a parameter named `guess`. + +# --hints-- + +You should use the `function` keyword to declare `pick`. + +```js +assert.match(code, /function\s+pick\s*/); +``` + +`pick` should take a parameter named `guess`. + +```js +assert.match(pick.toString(), /pick\s*\(\s*guess\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } + +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md new file mode 100644 index 00000000000..5f657de3877 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md @@ -0,0 +1,384 @@ +--- +id: 62aa258da314ef42ba0a1858 +title: Step 159 +challengeType: 0 +dashedName: step-159 +--- + +# --description-- + +Create two new functions named `pickTwo` and `pickEight`. + +Inside each of those, call the `pick()` function and pass either `2` or `8` as the argument depending on the function name. + +# --hints-- + +You should use the `function` keyword to declare `pickTwo`. + +```js +assert.match(code, /function\s+pickTwo\s*/); +``` + +You should use the `function` keyword to declare `pickEight`. + +```js +assert.match(code, /function\s+pickEight\s*/); +``` + +`pickTwo` should call the `pick` function. + +```js +assert.match(pickTwo.toString(), /pick\(/); +``` + +`pickTwo` should call the `pick` function with `2` as the argument. + +```js +assert.match(pickTwo.toString(), /pick\(\s*2\s*\)/); +``` + +`pickEight` should call the `pick` function. + +```js +assert.match(pickEight.toString(), /pick\(/); +``` + +`pickEight` should call the `pick` function with `8` as the argument. + +```js +assert.match(pickEight.toString(), /pick\(\s*8\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function pick(guess) { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md new file mode 100644 index 00000000000..01f3692b24e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md @@ -0,0 +1,389 @@ +--- +id: 62aa25fcb5837d43b4d9873d +title: Step 160 +challengeType: 0 +dashedName: step-160 +--- + +# --description-- + +Add another object to your `locations` array. Set `name` to `easter egg`, set `button text` to an array with the strings `2`, `8`, and `Go to town square?`, set `button functions` to an array with the variables `pickTwo`, `pickEight`, and `goTown`, and `text` to `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`. + +# --hints-- + +Your `locations` array should have 8 values. + +```js +assert.lengthOf(locations, 8); +``` + +Your eighth `locations` value should be an object. + +```js +assert.isObject(locations[7]); +``` + +Your eighth `locations` value should have a `name` property with the value `easter egg`. + +```js +assert.equal(locations[7].name, "easter egg"); +``` + +Your eighth `locations` value should have a `button text` property with the value an array with the strings `2`, `8`, and `Go to town square?`. + +```js +assert.deepEqual(locations[7]["button text"], ["2", "8", "Go to town square?"]); +``` + +Your eighth `locations` value should have a `button functions` property with the value an array with the variables `pickTwo`, `pickEight`, and `goTown`. + +```js +assert.deepEqual(locations[7]["button functions"], [pickTwo, pickEight, goTown]); +``` + +Your eighth `locations` value should have a `text` property with the value `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`. + +```js +assert.equal(locations[7].text, "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" +--fcc-editable-region-- + } + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md new file mode 100644 index 00000000000..c335f2d7bc9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md @@ -0,0 +1,364 @@ +--- +id: 62aa2626c3c10244b94c787b +title: Step 161 +challengeType: 0 +dashedName: step-161 +--- + +# --description-- + +Inside `pick`, use `let` to initialize a variable named `numbers` and set it to an empty array. + +# --hints-- + +Your `pick` function should initalize `numbers` to an empty array `[]`. + +```js +assert.match(pick.toString(), /numbers\s*=\s*\[\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md new file mode 100644 index 00000000000..b043a04a1a5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md @@ -0,0 +1,381 @@ +--- +id: 62aa264d23cdaa45a20efada +title: Step 162 +challengeType: 0 +dashedName: step-162 +--- + +# --description-- + +After your `numbers` array, create a `while` loop. A while loop accepts a condition, and will run the code in the block until the condition is no longer true. + +Your `while` loop should run while `numbers.length` is less than `10`. + +Here is an example of a `while` loop that runs while `i` is less than five. + +```js +while (i < 5) { + +} +``` + +# --hints-- + +Your `pick` function should have a `while` loop. + +```js +assert.match(pick.toString(), /while\s*\(/); +``` + +Your `while` loop should run while `numbers.length < 10`. + +```js +assert.match(pick.toString(), /while\s*\(\s*numbers.length\s*<\s*10\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md new file mode 100644 index 00000000000..beace6c6228 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md @@ -0,0 +1,379 @@ +--- +id: 62aa26cca3cd3d46c431e73b +title: Step 163 +challengeType: 0 +dashedName: step-163 +--- + +# --description-- + +Inside your `while` loop, push a random number between 0 and 10 to the end of the `numbers` array. You can create this random number with `Math.floor(Math.random() * 11)`. + +# --hints-- + +You should use the `push` method to add a random number to the end of the `numbers` array. + +```js +assert.match(pick.toString(), /numbers\.push\(/); +``` + +You should use `Math.floor(Math.random() * 11)` to create the random number. + +```js +assert.match(pick.toString(), /Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)/); +``` + +You should `push` the result of `Math.floor(Math.random() * 11)` to the end of the `numbers` array. + +```js +assert.match(pick.toString(), /numbers\.push\(\s*Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md new file mode 100644 index 00000000000..ac85513b88f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md @@ -0,0 +1,380 @@ +--- +id: 62aa27227399d647e1c37a3c +title: Step 164 +challengeType: 0 +dashedName: step-164 +--- + +# --description-- + +After the `while` loop, set `text.innerText` to equal `You picked [guess]. Here are the random numbers:`. Replace `guess` with the player's guess. + +# --hints-- + +You should set `text.innerText` to the string `You picked `. Remember that spacing matters. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1/); +``` + +You should use the concatenation operator to add the value of the `guess` parameter to your `You picked ` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess/); +``` + +You should use the concatenation operator to add the string `. Here are the random numbers:` to your `"You picked " + guess` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md new file mode 100644 index 00000000000..3b20e162326 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md @@ -0,0 +1,368 @@ +--- +id: 62aa27560def7048d7b4a095 +title: Step 165 +challengeType: 0 +dashedName: step-165 +--- + +# --description-- + +Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line. + +# --hints-- + +You should add the new line escape character `\n` to your `. Here are the random numbers: ` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\\n\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:"; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md new file mode 100644 index 00000000000..180270940d6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md @@ -0,0 +1,375 @@ +--- +id: 62aa27c40ca6f04ab8be5fac +title: Step 166 +challengeType: 0 +dashedName: step-166 +--- + +# --description-- + +A `for` loop runs for a specific number of times. We will break down how a `for` loop runs in the next several steps. For now, copy this loop below and paste it at the end of your `pick` function. + +```js +for (let x = 1; x < 5; x++) { + +} +``` + +# --hints-- + +You should copy the above loop into your `pick` function. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*x\s*=\s*1\s*;\s*x\s*<\s*5\s*;\s*x\s*\+\+\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md new file mode 100644 index 00000000000..4b4af2f8669 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md @@ -0,0 +1,375 @@ +--- +id: 62aa28032d863d4bd8058799 +title: Step 167 +challengeType: 0 +dashedName: step-167 +--- + +# --description-- + +`for` loops are declared with three expressions separated by semicolons. `for (a; b; c)`, where `a` is the initialization expression, `b` is the condition, and `c` is the final expression. + +The initialization expression is executed only once, before the loop starts, and is often used to define and set up the loop variable. Think of it like declaring a counter to use in your loop. + +Many `for` loops use `i` as the counter and start from 0, so change `let x = 1;` to `let i = 0;`. + +# --hints-- + +You should change your initialization in the `for` loop to be `let i = 0;`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let x = 1; x < 5; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md new file mode 100644 index 00000000000..7067e31d3f3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md @@ -0,0 +1,373 @@ +--- +id: 62aa287434dc284cea01157c +title: Step 168 +challengeType: 0 +dashedName: step-168 +--- + +# --description-- + +The second statement in a `for` loop, the condition statement, is evaluated at the beginning of every loop iteration. The loop will continue as long as the condition evaluates to be true. + +We want the loop to run 10 times, so change `x < 5` to `i < 10`. + +# --hints-- + +You should update your condition statement to be `i < 10`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; x < 5; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md new file mode 100644 index 00000000000..72bbc1f15f8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md @@ -0,0 +1,373 @@ +--- +id: 62aa28bbd6323e4dfb3ac43e +title: Step 169 +challengeType: 0 +dashedName: step-169 +--- + +# --description-- + +The last statement in a `for` loop, the final expression, is executed at the end of each loop iteration. + +Since we changed the initialization statement to use `i` instead of `x`, change `x++` to `i++`. This will increment the initializer `i` by 1 after each loop. + +# --hints-- + +You should change your final expression to `i++`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;\s*i\+\+\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md new file mode 100644 index 00000000000..94da3ef415e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md @@ -0,0 +1,390 @@ +--- +id: 62aa28fb651bf14efa2dbb16 +title: Step 170 +challengeType: 0 +dashedName: step-170 +--- + +# --description-- + +Now you can write the logic to run in the loop. Inside your `for` loop, use the `+=` operator to add to the end of `text.innerText`. Add the number at index `i` of the `numbers` array, using `numbers[i]`. Then add a new line, using the escape sequence you used earlier. + +# --hints-- + +You should use compound assignment to add to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=/); +``` + +You should use bracket notation to access `numbers[i]`. + +```js +assert.match(pick.toString(), /numbers\[i\]/); +``` + +You should add `numbers[i]` to your `text.innerText` value. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]/); +``` + +You should add a new-line character after the `numbers[i]` value. Remember that you can do this with `\n`. + +```js +console.log(pick.toString()); +assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]\s*\+\s*('|")\\n\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md new file mode 100644 index 00000000000..b1540f1ac41 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md @@ -0,0 +1,387 @@ +--- +id: 62aa2943669c9d5026af6985 +title: Step 171 +challengeType: 0 +dashedName: step-171 +--- + +# --description-- + +The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +After your `for` loop, add an `if` expression to check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`. + +Here is an example of the `indexOf` syntax: + +```js +const numbers = [1, 2, 3]; +numbers.indexOf(2) // 1 +``` + +# --hints-- + +Your `pick` function should have an `if` statement. + +```js +assert.match(pick.toString(), /if/); +``` + +Your `if` statement should check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`. + +```js +assert.match(pick.toString(), /if\s*\(numbers\.indexOf\(\s*guess\s*\)\s*!==\s*-1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md new file mode 100644 index 00000000000..aa044de71f3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md @@ -0,0 +1,386 @@ +--- +id: 62aa2999ec27ec516655eba6 +title: Step 172 +challengeType: 0 +dashedName: step-172 +--- + +# --description-- + +Inside the `if` expression, add the string `Right! You win 20 gold!` to the end of `text.innerText`. Also, add `20` to the value of `gold` and update the `goldText.innerText`. + +# --hints-- + +You should use compound assignment to add the string `Right! You win 20 gold!` to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Right! You win 20 gold!\1/); +``` + +You should use compound assignment add `20` to the value of `gold`. + +```js +assert.match(pick.toString(), /gold\s*\+=\s*20/); +``` + +You should update the `goldText.innerText` to reflect the new value of `gold`. + +```js +assert.match(pick.toString(), /goldText\.innerText\s*\=\s*gold/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md new file mode 100644 index 00000000000..13ed8152080 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md @@ -0,0 +1,394 @@ +--- +id: 62aa29d8f8f88152c91350ca +title: Step 173 +challengeType: 0 +dashedName: step-173 +--- + +# --description-- + +Now add an `else` expression. Inside, add `Wrong! You lose 10 health!` to the end of `text.innerText`. Subtract `10` from `health` and update `healthText.innerText`. + +# --hints-- + +You should add an `else` block. + +```js +assert.match(pick.toString(), /else\s*\{/); +``` + +Your `else` block should use compound assignment to add `Wrong! You lose 10 health!` to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Wrong! You lose 10 health!\1/); +``` + +Your `else` block should use compound assignment to subtract `10` from `health`. + +```js +assert.match(pick.toString(), /health\s*-=\s*10/); +``` + +Your `else` block should update the `healthText.innerText` to reflect the new value of `health`. + +```js +assert.match(pick.toString(), /healthText\.innerText\s*=\s*health/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md new file mode 100644 index 00000000000..5f48991b690 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md @@ -0,0 +1,394 @@ +--- +id: 62aa2aec2f09d454253aad6c +title: Step 174 +challengeType: 0 +dashedName: step-174 +--- + +# --description-- + +Since you subtracted health from the player, you need to check `if` the player's `health` is less than or equal to `0`. If it is, call the `lose` function. + +# --hints-- + +Your `pick` function should have a second `if` statement. + +```js +const match = pick.toString().match(/if/g); +assert.isAtLeast(match.length, 2); +``` + +Your `if` statement should check if the player's `health` is less than or equal to `0`. + +```js +assert.match(pick.toString(), /if\s*\(\s*health\s*<=\s*0\s*\)/); +``` + +Your `if` statement should call the `lose` function. + +```js +assert.match(pick.toString(), /lose\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md new file mode 100644 index 00000000000..f9bcbbb6387 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md @@ -0,0 +1,746 @@ +--- +id: 62aa2ba9cd881355a6f0a5a8 +title: Step 175 +challengeType: 0 +dashedName: step-175 +--- + +# --description-- + +Looking at your `kill monster` object, `button functions` currently has three `goTown` variables. Replace the third one with `easterEgg` - this is how a player will access the hidden feature of the game. Do not change the `button text`. + +With this, your RPG game is complete! You can now play around - can you defeat the dragon? + +# --hints-- + +You should update your fifth `locations` object to have a `button functions` property of `[goTown, goTown, easterEgg]`. + +```js +assert.deepEqual(locations[4]["button functions"], [goTown, goTown, easterEgg]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, +--fcc-editable-region-- + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + if (health <= 0) { + lose(); + } + } +} +``` + +# --solutions-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, easterEgg], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + if (health <= 0) { + lose(); + } + } +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md new file mode 100644 index 00000000000..d98f9e81298 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md @@ -0,0 +1,121 @@ +--- +id: 62b46e3a8d4be31be5af793d +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +We have run in to a slight problem. You are trying to query your page for a button element, but your `script` tag is in the `head` of your HTML. This means your code runs before the browser has finished reading the HTML, and your `document.querySelector()` will not see the button - because the browser hasn't processed it yet. + +To fix this, move your `script` element out of the `head` element, and place it at the end of your `body` element (just before the closing `` tag.) + +# --hints-- + +Your `script` element should not be in your `head` element. + +```js +const script = document.querySelector('script[data-src$="script.js"]'); +assert.notEqual(script.parentElement.tagName, "HEAD"); +``` + +Your `script` element should come at the end of your `body` element. + +```js +const script = document.querySelector('script[data-src$="script.js"]'); +assert.equal(script.previousElementSibling.tagName, "DIV"); +assert.isNull(script.nextElementSibling); +assert.equal(script.parentElement.tagName, "BODY"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +--fcc-editable-region-- + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +let button1 = document.querySelector("#button1"); +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md new file mode 100644 index 00000000000..e5d8098b79a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md @@ -0,0 +1,339 @@ +--- +id: 62ba17beef16c563069a65d8 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +In the `locations` array, add another object at the end. Set the `name` property to `lose`, set `button text` to an array with three `REPLAY?` strings, set `button functions` to an array with three `restart` variables, and set `text` to `You die. ☠️`. You can copy that text to use the emote. + +# --hints-- + +You should have six values in the `locations` array. + +```js +assert.lengthOf(locations, 6); +``` + +Your sixth `locations` value should be an object. + +```js +assert.isObject(locations[5]); +``` + +Your sixth `locations` value should have a `name` property with the value `lose`. + +```js +assert.equal(locations[5].name, 'lose'); +``` + +Your sixth `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings. + +```js +assert.deepEqual(locations[5]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']); +``` + +Your sixth `locations` value should have a `button functions` property with the value an array with three `restart` variables. + +```js +assert.deepEqual(locations[5]["button functions"], [restart, restart, restart]); +``` + +Your sixth `locations` value should have a `text` property with the value `You die. ☠️`. + +```js +assert.equal(locations[5].text, 'You die. ☠️'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md new file mode 100644 index 00000000000..50b06ed7911 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md @@ -0,0 +1,114 @@ +--- +id: 62fc1ee0c5a89717d4785729 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give your `#monsterStats` element the same `border` and `padding` as your `#stats` element. Set its color to `white` and give it a `red` background. + +# --hints-- + +You should have a `#monsterStats` selector. + +```js +const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats'); +assert.exists(monsterStats); +``` + +Your `#monsterStats` selector should have a `border` of `1px solid black`. + +```js +const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +Your `#monsterStats` selector should have `5px` of padding. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +Your `#monsterStats` selector should have a `color` of `white`. + +```js +const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +Your `#monsterStats` selector should have a `background-color` of `red`. + +```js +const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color'); +assert.equal(background, 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md new file mode 100644 index 00000000000..1b122cb50c8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md @@ -0,0 +1,127 @@ +--- +id: 62fc20387ef88d1d1998aac5 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Use `querySelector()` to get the other two button elements, using their `#button2` and `#button3` `id`s. Store them in variables called `button2` and `button3`. Remember to use `const`. + +# --hints-- + +You should declare a `button2` variable with `const`. + +```js +assert.match(code, /const button2/); +``` + +Your `button2` variable should have the value of your `#button2` element. + +```js +assert.deepEqual(button2, document.querySelector('#button2')); +``` + +You should declare a `button3` variable with `const`. + +```js +assert.match(code, /const button3/); +``` + +Your `button3` variable should have the value of your `#button3` element. + +```js +assert.deepEqual(button3, document.querySelector('#button3')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md new file mode 100644 index 00000000000..5dd815b61c0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md @@ -0,0 +1,123 @@ +--- +id: 62fc211760bfc220f4734800 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Finally, use `querySelector()` to get the `#monsterHealth` element. Because you have already declared a `monsterHealth` variable earlier, you need to use a different variable name for this element. Declare a new variable with the `const` keyword and name it `monsterHealthText`. + +# --hints-- + +You should declare a `monsterHealthText` variable with `const`. + +```js +assert.match(code, /const monsterHealthText/); +``` + +Your `monsterHealthText` variable should have the value of your `#monsterHealth` element. + +```js +assert.deepEqual(monsterHealthText, document.querySelector('#monsterHealth')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md new file mode 100644 index 00000000000..a2ce162457c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md @@ -0,0 +1,100 @@ +--- +id: 5ddb965c65d27e1512d44d9a +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. + +In JavaScript, you can access the DOM by referencing the global `document` object. + +To view the DOM, log it to the console with `console.log(document)`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast
+ Lunch
+ Dinner +
+ + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md new file mode 100644 index 00000000000..aab244748d6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md @@ -0,0 +1,114 @@ +--- +id: 5ddb965c65d27e1512d44d9b +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +In our HTML document, we have a form element with an `id` attribute: `
` + +To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. + +The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+ +

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + + +
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md new file mode 100644 index 00000000000..31afd7303fc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md @@ -0,0 +1,119 @@ +--- +id: 5ddb965c65d27e1512d44d9c +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. + +Forms have an `onsubmit` event that can execute a function when the form is submitted. + +For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. + +Assign a function named `calculate` to the `onsubmit` event of your form. + +You will create the `calculate` function later. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md new file mode 100644 index 00000000000..bcd3b1bc287 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md @@ -0,0 +1,112 @@ +--- +id: 5ddb965c65d27e1512d44d9d +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: + +```js +function square() {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(typeof calculate === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md new file mode 100644 index 00000000000..8a02a67b570 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md @@ -0,0 +1,115 @@ +--- +id: 5ddb965c65d27e1512d44d9e +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. + +Here is an example of an empty function called `square` that takes a `number` as a parameter: + +```js +function square(number) {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md new file mode 100644 index 00000000000..0cd5d1525fd --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md @@ -0,0 +1,113 @@ +--- +id: 5ddb965c65d27e1512d44d9f +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. + +Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md new file mode 100644 index 00000000000..ee8e8356f0d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md @@ -0,0 +1,122 @@ +--- +id: 5ddb965c65d27e1512d44da0 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. + +To access elements with a certain class name, we use the `getElementsByClassName()` method. + +Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md new file mode 100644 index 00000000000..9b80e0f827c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md @@ -0,0 +1,119 @@ +--- +id: 5ddb965c65d27e1512d44da1 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md new file mode 100644 index 00000000000..c5a2856f2c3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md @@ -0,0 +1,121 @@ +--- +id: 5ddb965c65d27e1512d44da2 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md new file mode 100644 index 00000000000..40f6a846fd5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md @@ -0,0 +1,116 @@ +--- +id: 5ddb965c65d27e1512d44da3 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. + +# --hints-- + +See description above for instructions. + +```js +assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md new file mode 100644 index 00000000000..725bff25987 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md @@ -0,0 +1,117 @@ +--- +id: 5ddb965c65d27e1512d44da4 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md new file mode 100644 index 00000000000..fead88a0598 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md @@ -0,0 +1,129 @@ +--- +id: 5ddb965c65d27e1512d44da5 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. + +The `map()` method allows us to do exactly that. + +Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .toString() + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md new file mode 100644 index 00000000000..714497fddbb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md @@ -0,0 +1,127 @@ +--- +id: 5ddb965c65d27e1512d44da6 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Now we need to provide a function to `map()` that will be performed on each item of the array. + +This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: + +```js +function(meal){} +``` + +Enter in the above function as an argument in between the parentheses of the `.map()` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md new file mode 100644 index 00000000000..7d58167b80c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md @@ -0,0 +1,125 @@ +--- +id: 5ddb965c65d27e1512d44da7 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. + +If you want, console log `total` to see what results you are getting. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md new file mode 100644 index 00000000000..4a199951818 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md @@ -0,0 +1,123 @@ +--- +id: 5ddb965c65d27e1512d44da8 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md new file mode 100644 index 00000000000..6058cea614a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md @@ -0,0 +1,122 @@ +--- +id: 5ddb965c65d27e1512d44da9 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md new file mode 100644 index 00000000000..46dfade8b55 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md @@ -0,0 +1,123 @@ +--- +id: 5ddb965c65d27e1512d44daa +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. + +Chain the `reduce()` method to the `Array.from()` expression. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md new file mode 100644 index 00000000000..065b5dce513 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md @@ -0,0 +1,139 @@ +--- +id: 5ddb965c65d27e1512d44dab +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: + +```js +function(accumulator, currentValue) { /* code to run */ } +``` + +or using arrow functions: + +```js +(accumulator, currentValue) => { /* code to run */ } +``` + +Insert the above callback function as an argument in the `.reduce()` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md new file mode 100644 index 00000000000..448c7702610 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md @@ -0,0 +1,139 @@ +--- +id: 5ddb965c65d27e1512d44dac +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. + +Here is an example of a `reduce()` method with an empty object as its initial value: + +```js +arr.reduce((accumulator, currentValue) => { + /* code to run */ +}, {}); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md new file mode 100644 index 00000000000..4134f0401a2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md @@ -0,0 +1,147 @@ +--- +id: 5ddb965c65d27e1512d44dad +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. + +We can use the reduce function as follows: + +```js +arr.reduce((accumulator, currentValue) => { + return accumulator + currentValue; +}, 0); +``` + +At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. + +At `arr[1]`, the function is `(1, 3) => 1 + 3`, + +Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. + +In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md new file mode 100644 index 00000000000..c9d4f5bd8ad --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md @@ -0,0 +1,136 @@ +--- +id: 5e302e80e003129199103c78 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` + +You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. + +When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md new file mode 100644 index 00000000000..b36ed2d97b6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md @@ -0,0 +1,139 @@ +--- +id: 5e302e8ce003129199103c79 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Now let's simplify the `reduce()` callback function by refactoring it. + +Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. + +So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. + +Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md new file mode 100644 index 00000000000..8825fbe6dd0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md @@ -0,0 +1,133 @@ +--- +id: 5ddb965c65d27e1512d44dae +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. + +Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. + +If you inspect the Female radio button you will notice its id: `` + +Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md new file mode 100644 index 00000000000..1e19c715fcf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md @@ -0,0 +1,131 @@ +--- +id: 5ddb965c65d27e1512d44daf +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` + +Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md new file mode 100644 index 00000000000..21d83417535 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md @@ -0,0 +1,141 @@ +--- +id: 5ddb965c65d27e1512d44db0 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. + +For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: + +```js +if (5 - 3 === 4) { + return 'Yes'; +} else { + return 'No'; +} +``` + +`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md new file mode 100644 index 00000000000..abe960e3120 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md @@ -0,0 +1,129 @@ +--- +id: 5ddb965c65d27e1512d44db1 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now that we have `total` and `maxCalories`, we need to find out the difference between them. + +Create a variable named `difference` and set it equal to `total - maxCalories` + +# --hints-- + +See description above for instructions. + +```js +assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md new file mode 100644 index 00000000000..ad3abc0bfe5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md @@ -0,0 +1,141 @@ +--- +id: 5ddb965c65d27e1512d44db2 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. + +To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). + +If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. + +Use the same ternary syntax that you used to determine `maxCalories`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md new file mode 100644 index 00000000000..2dbdd8b547b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md @@ -0,0 +1,143 @@ +--- +id: 5ddb965c65d27e1512d44db3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
`. + +We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. + +Create a variable named `output` and set it equal to this division element with the `id` of `output`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md new file mode 100644 index 00000000000..87062f28e7f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db4 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Now it's time to create the HTML elements that we will add inside of `output`. + +To create an element, use `createElement()`. For example: + +```js +const myHeading1 = document.createElement('h1') +``` + +Create an `h3` element and assign it to a variable named `result`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md new file mode 100644 index 00000000000..90ad3c91cb4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md @@ -0,0 +1,154 @@ +--- +id: 5ddb965c65d27e1512d44db5 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Next, we will create a text node that we will later append to the `result` element. + +JavaScript has a function called `createTextNode()` to accomplish this. For example: + +```js +const myText = document.createTextNode("Hello world!") +``` + +Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md new file mode 100644 index 00000000000..b93248efe69 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db6 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +We can now use the `difference` variable that we created above. + +Insert the `difference` variable inside the parentheses of `.createTextNode()` + +If you want to see what the text currently looks like, try `console.log(resultText)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md new file mode 100644 index 00000000000..fd08248b5f0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db7 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Notice how if `total` is less than `maxCalories`, `difference` is a negative number. + +We want to show the absolute value of the difference so it displays "300" rather than "-300". + +Wrap the `difference` in a `Math.abs()` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md new file mode 100644 index 00000000000..f066a2b3607 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md @@ -0,0 +1,149 @@ +--- +id: 5ddb965c65d27e1512d44db8 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md new file mode 100644 index 00000000000..d2e8c9a31c3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md @@ -0,0 +1,153 @@ +--- +id: 5ddb965c65d27e1512d44db9 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next we want to add the text from the `surplusOrDeficit` variable that we previously created. + +Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md new file mode 100644 index 00000000000..1311c2ac849 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md @@ -0,0 +1,161 @@ +--- +id: 5ddb965c65d27e1512d44dba +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. + +Some people consider this a little cumbersome and prefer to use template literals instead. + +Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. + +For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. + +Convert the data inside of `createTextNode()` to be a template literal. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md new file mode 100644 index 00000000000..923d7d02e23 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md @@ -0,0 +1,153 @@ +--- +id: 5ddb965c65d27e1512d44dbb +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: + +```js +result.appendChild(resultText); +``` + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md new file mode 100644 index 00000000000..09da32b6cb5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md @@ -0,0 +1,154 @@ +--- +id: 5ddb965c65d27e1512d44dbc +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Similarly, append the `result` to the `output` element with the `appendChild()` method. + +Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md new file mode 100644 index 00000000000..ccb8660bf13 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md @@ -0,0 +1,159 @@ +--- +id: 5ddb965c65d27e1512d44dbd +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Next, let's create and add a horizontal rule (`hr`) element to the output. + +Create an `hr` element and assign it to a variable named `line`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md new file mode 100644 index 00000000000..e0f9bd9c47c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md @@ -0,0 +1,158 @@ +--- +id: 5ddb965c65d27e1512d44dbe +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add the `line` to the `output` element using the `appendChild()` method. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md new file mode 100644 index 00000000000..4c4b069fb43 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md @@ -0,0 +1,167 @@ +--- +id: 5ddb965c65d27e1512d44dbf +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Let's create a few more HTML elements to add to the `output`. + +Create an `h4` element and assign it to a variable named `recommended`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md new file mode 100644 index 00000000000..0becd375fa5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md @@ -0,0 +1,170 @@ +--- +id: 5ddb965c65d27e1512d44dc0 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Create a text node and assign it to a variable named `recommendedText`. + +This is similar to how your created the `resultText` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md new file mode 100644 index 00000000000..fd2d846ab52 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md @@ -0,0 +1,175 @@ +--- +id: 5ddb965c65d27e1512d44dc1 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. + +Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". + +This is similar to template literal syntax previously used to create `resultText`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md new file mode 100644 index 00000000000..9e9d9c9c3f2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md @@ -0,0 +1,175 @@ +--- +id: 5ddb965c65d27e1512d44dc2 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Append the `recommendedText` node to the `recommended` element. + +This is similar to how the `resultText` is appended to `result` previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md new file mode 100644 index 00000000000..9264e8ac9cf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md @@ -0,0 +1,174 @@ +--- +id: 5ddb965c65d27e1512d44dc3 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Append the `recommended` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md new file mode 100644 index 00000000000..0fd8978f093 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5ddb965c65d27e1512d44dc4 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. + +Create an `h4` element and assign it to a variable named `consumed`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md new file mode 100644 index 00000000000..6bb2536f422 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md @@ -0,0 +1,192 @@ +--- +id: 5ddb965c65d27e1512d44dc5 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. + +For example: + +```js +consumed.innerHTML = `Hello world`; +``` + +Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md new file mode 100644 index 00000000000..29d043f4c6e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md @@ -0,0 +1,182 @@ +--- +id: 5ddb965c65d27e1512d44dc6 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Append the `consumed` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md new file mode 100644 index 00000000000..c34dcad8f68 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5ddb965c65d27e1512d44dc7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Now it's time to add some styling which can be added directly as attributes or classes. + +In our CSS file, we have a styling rule for any elements with the class name `green-text`. + +On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. + +Now if you submit the form again and inspect the `result` element, you will see it as `

` and notice that the text is now green. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md new file mode 100644 index 00000000000..7298971ffec --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5ddb965c65d27e1512d44dc8 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. + +For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. + +Set the `class` attribute of the `output` element equal to a class named `bordered-class`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md new file mode 100644 index 00000000000..1b0bd348910 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md @@ -0,0 +1,199 @@ +--- +id: 5ddb965c65d27e1512d44dc9 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. + +Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. + +The `calculate()` function is now finished! + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md new file mode 100644 index 00000000000..56bbb142804 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md @@ -0,0 +1,206 @@ +--- +id: 5ddb965c65d27e1512d44dca +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. + +In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: + +```html + + + + +
+ + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md new file mode 100644 index 00000000000..db8f9bc95c1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5ddb965c65d27e1512d44dcb +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +We want a function to run every time the user clicks the "Add Entry" button. + +Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: + +```js +function() {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md new file mode 100644 index 00000000000..886f041422c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md @@ -0,0 +1,203 @@ +--- +id: 5ddb965c65d27e1512d44dcc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Inside the function, create an `input` document element and assign it to a variable named `foodInput`. + +This is similar to how you created the `result` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md new file mode 100644 index 00000000000..6860d68731d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md @@ -0,0 +1,204 @@ +--- +id: 5ddb965c65d27e1512d44dcd +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Set the `placeholder` property of the `foodInput` equal to `'food name'`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md new file mode 100644 index 00000000000..89e37a9f626 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md @@ -0,0 +1,210 @@ +--- +id: 5ddb965c65d27e1512d44dce +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. + +In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. + +Add the class name `food-control` to the `foodInput` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md new file mode 100644 index 00000000000..e0ab30e27b5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md @@ -0,0 +1,214 @@ +--- +id: 5ddb965c65d27e1512d44dcf +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Notice that parent container of all of the inputs has an `id` of `entries`: `
`. + +Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. + +This is similar to the other `appendChild()` methods that you have used previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md new file mode 100644 index 00000000000..ea1faf6c59c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md @@ -0,0 +1,211 @@ +--- +id: 5ddb965c65d27e1512d44dd0 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md new file mode 100644 index 00000000000..594af428356 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md @@ -0,0 +1,218 @@ +--- +id: 5ddb965c65d27e1512d44dd1 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. + +This is similar to how to set the class of the `output` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md new file mode 100644 index 00000000000..962a0309894 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md @@ -0,0 +1,220 @@ +--- +id: 5ddb965c65d27e1512d44dd2 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +The `calorieInput` element should only accept numbers that are 0 or above. + +Set the `min` attribute of `calorieInput` to `0`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md new file mode 100644 index 00000000000..eac60b49fce --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md @@ -0,0 +1,220 @@ +--- +id: 5ddb965c65d27e1512d44dd3 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. + +We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md new file mode 100644 index 00000000000..7ffb7021744 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md @@ -0,0 +1,222 @@ +--- +id: 5ddb965c65d27e1512d44dd4 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. + +To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md new file mode 100644 index 00000000000..8e15285d2a9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md @@ -0,0 +1,226 @@ +--- +id: 5ddb965c65d27e1512d44dd5 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. + +The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md new file mode 100644 index 00000000000..df36314c4ae --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md @@ -0,0 +1,230 @@ +--- +id: 5ddb965c65d27e1512d44dd6 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. + +Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md new file mode 100644 index 00000000000..1e5b3e9b048 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md @@ -0,0 +1,226 @@ +--- +id: 5ddb965c65d27e1512d44dd7 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. + +# --hints-- + +See description above for instructions. + +```js +assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md new file mode 100644 index 00000000000..7a941b6559c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md @@ -0,0 +1,238 @@ +--- +id: 5ddb965c65d27e1512d44dd8 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Create a variable named `clearOutput` and set it equal to a blank arrow function: + +```js +const clearOutput = () => {} +``` + +This is similar to `function clearOutput () {}`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof clearOutput === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md new file mode 100644 index 00000000000..e6a2d2c6337 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md @@ -0,0 +1,243 @@ +--- +id: 5ddb965c65d27e1512d44dd9 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +We need to remove the contents inside of element with the `id` of `output`. + +In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md new file mode 100644 index 00000000000..f8984120835 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md @@ -0,0 +1,250 @@ +--- +id: 5ddb965c65d27e1512d44dda +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. + +Remove the `bordered-class` class. For example: + +```js +document.getElementById('my-div').classList.remove('my-class') +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md new file mode 100644 index 00000000000..93a258c395b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md @@ -0,0 +1,243 @@ +--- +id: 5ddb965c65d27e1512d44ddb +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. + +In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/clearOutput\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md new file mode 100644 index 00000000000..6a07e9aa83b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md @@ -0,0 +1,244 @@ +--- +id: 5ddb965c65d27e1512d44ddc +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof clearForm === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md new file mode 100644 index 00000000000..88284a00280 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md @@ -0,0 +1,259 @@ +--- +id: 5ddb965c65d27e1512d44ddd +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. + +Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. + +This is similar to how you declared the `total` variable previously in the `calculate` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md new file mode 100644 index 00000000000..9cc201d5194 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md @@ -0,0 +1,257 @@ +--- +id: 5ddb965c65d27e1512d44dde +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. + +Add `foodInputs.forEach()`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md new file mode 100644 index 00000000000..8044dac1e60 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md @@ -0,0 +1,263 @@ +--- +id: 5ddb965c65d27e1512d44ddf +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +We need to provide a callback function in the parentheses of `forEach()`. + +This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. + +In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md new file mode 100644 index 00000000000..dd34b193b4c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md @@ -0,0 +1,271 @@ +--- +id: 5ddb965c65d27e1512d44de0 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. + +Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. + +This is similar to how you declared the `foodInputs` variable previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md new file mode 100644 index 00000000000..652c8f99281 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md @@ -0,0 +1,269 @@ +--- +id: 5ddb965c65d27e1512d44de1 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md new file mode 100644 index 00000000000..b3cf00545fa --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md @@ -0,0 +1,277 @@ +--- +id: 5ddb965c65d27e1512d44de2 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. + +Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md new file mode 100644 index 00000000000..ead4dfe0e77 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md @@ -0,0 +1,185 @@ +--- +id: 5ddb965c65d27e1512d44de3 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Congratulations! Have fun playing with your completed calorie counter. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md new file mode 100644 index 00000000000..08bc2a4aa43 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md @@ -0,0 +1,78 @@ +--- +id: 5d79253297c0ebb149ea9fed +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +In functional programming, we prefer immutable values over mutable values. + +Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. + +Start by creating an empty `infixToFunction` object using `const`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md new file mode 100644 index 00000000000..3159f1d2410 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md @@ -0,0 +1,80 @@ +--- +id: 5d7925323be8848dbc58a07a +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md new file mode 100644 index 00000000000..c5dbbab705c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md @@ -0,0 +1,84 @@ +--- +id: 5d792532f631702ae6d23e11 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Now return the sum of `x` and `y` using the `return` keyword. + +# --hints-- + +See description above for instructions. + +```js +assert(add(1, 2) === 3 && add(100, 2000) === 2100); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md new file mode 100644 index 00000000000..0a9d327d798 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md @@ -0,0 +1,88 @@ +--- +id: 5d7925329445167ecc2ac9c9 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. + +Assign `add` to a new variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md new file mode 100644 index 00000000000..4e85d64fbe2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md @@ -0,0 +1,94 @@ +--- +id: 5d792532b07918c3a5904913 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: + +```js +function(x) { + return x +} +``` + +First, remove the `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md new file mode 100644 index 00000000000..a9aa387addd --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md @@ -0,0 +1,94 @@ +--- +id: 5d792533cc8b18b6c133edc7 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: + +```js +const fn = function(x) { + return x; +} + +fn(); +``` + +Assign the anonymous function to the variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md new file mode 100644 index 00000000000..68c44b16619 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md @@ -0,0 +1,90 @@ +--- +id: 5d7925337954ed57a565a135 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. + +Rewrite `addVar` using ES6's arrow syntax: + +```js +const fn = (x, y) => x; +``` + +Note that the value is returned implicitly. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md new file mode 100644 index 00000000000..676f6c6f4ff --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md @@ -0,0 +1,82 @@ +--- +id: 5d79253352e33dd59ec2f6de +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Add the key `+` to `infixToFunction` and assign it the value `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(infixToFunction['+'].toString() === addVar.toString()); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md new file mode 100644 index 00000000000..c44846417a5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md @@ -0,0 +1,84 @@ +--- +id: 5d792533d31e4f7fad33011d +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md new file mode 100644 index 00000000000..2096072d738 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md @@ -0,0 +1,82 @@ +--- +id: 5d792533e7707b9645d7b540 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Remove the now redundant `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof addVar === 'undefined'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md new file mode 100644 index 00000000000..526e706eb08 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md @@ -0,0 +1,87 @@ +--- +id: 5d79253378595ec568f70ab6 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Add similar definitions for `-`, `*` and `/` in `infixToFunction`. + +# --hints-- + +See description above for instructions. + +```js +assert( + infixToFunction['-'](10, 2) === 8 && + infixToFunction['*'](10, 10) === 100 && + infixToFunction['/'](100, 10) === 10 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md new file mode 100644 index 00000000000..37432637ac6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md @@ -0,0 +1,92 @@ +--- +id: 5d7925330918ae4a2f282e7e +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md new file mode 100644 index 00000000000..3d09b3967f2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md @@ -0,0 +1,98 @@ +--- +id: 5d792533ed00e75d129e1b18 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). + +Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. + +This is how you would pass the `-` function: + +```js +str.replace(regex, infixToFunction["-"]) +``` + +# --hints-- + +See description above for instructions. + +```js +assert(infixEval('ab', /(a)b/) === 'aba'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md new file mode 100644 index 00000000000..0926459ef14 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md @@ -0,0 +1,97 @@ +--- +id: 5d792533a5c42fb4d1a4b70d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md new file mode 100644 index 00000000000..23968d2e070 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md @@ -0,0 +1,102 @@ +--- +id: 5d79253358e8f646cbeb2bb0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Change the `"+"` in the call to `infixToFunction` to `fn`. + +`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md new file mode 100644 index 00000000000..f3dd1211e6a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md @@ -0,0 +1,104 @@ +--- +id: 5d792533bb38fab70b27f527 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". + +Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). + +# --hints-- + +See description above for instructions. + +```js +const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; +assert( + infixEval('23+35', regex) === '58' && + infixEval('100-20', regex) === '80' && + infixEval('10*10', regex) === '100' && + infixEval('120/6', regex) === '20' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md new file mode 100644 index 00000000000..e295114e777 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md @@ -0,0 +1,100 @@ +--- +id: 5d79253386060ed9eb04a070 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. + +To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. + +Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md new file mode 100644 index 00000000000..1af15a10b8e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md @@ -0,0 +1,103 @@ +--- +id: 5d792533717672657b81aa69 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +When defining an arrow function with a single argument, the parentheses can be omitted: + +```js +const greeting = name => `Hello !`; +``` + +Define a function `highPrecedence` which takes a single argument `str` and returns it. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('a') === 'a'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md new file mode 100644 index 00000000000..5c2d8560932 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md @@ -0,0 +1,110 @@ +--- +id: 5d7925335ab63018dcec11fe +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Arrow functions can have multiple statements: + +```js +const fn = (x, y) => { + const result = x + y; + return result; // explicit return statement required +}; +``` + +Use this syntax for the `highPrecedence` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md new file mode 100644 index 00000000000..1ddd40ce5d8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md @@ -0,0 +1,105 @@ +--- +id: 5d7925330f300c342315066d +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md new file mode 100644 index 00000000000..3bfba3454a9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md @@ -0,0 +1,107 @@ +--- +id: 5d792533aa6443215c9b16bf +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md new file mode 100644 index 00000000000..333b8bcb122 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md @@ -0,0 +1,120 @@ +--- +id: 5d7925334c5e22586dd72962 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The ternary operator has the following syntax: + +```js +const result = condition ? valueIfTrue : valueIfFalse; +const result = 1 === 1 ? 1 : 0; // 1 +const result = 9 > 10 ? "Yes" : "No"; // "No" +``` + +Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2') === '' && + highPrecedence('2+2') === '2+2' && + code.includes('?') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md new file mode 100644 index 00000000000..c5f666b8a05 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md @@ -0,0 +1,114 @@ +--- +id: 5d79253307ecd49e030bdcd1 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. + +Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2*2') === '8' && + highPrecedence('2*2') === '4' && + highPrecedence('2+2') === '2+2' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md new file mode 100644 index 00000000000..c837d8e94e1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md @@ -0,0 +1,112 @@ +--- +id: 5d792534257122211d3043af +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. + +# --hints-- + +See description above for instructions. + +```js +assert(spreadsheetFunctions['']('x') === 'x'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md new file mode 100644 index 00000000000..58109dce7a4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md @@ -0,0 +1,120 @@ +--- +id: 5d7925346f4f2da6df4354a6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md new file mode 100644 index 00000000000..313db4427d6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md @@ -0,0 +1,128 @@ +--- +id: 5d792534cac2dbe0a719ea7a +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set `noHigh` to `highPrecedence(str)` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md new file mode 100644 index 00000000000..bc94c78c155 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md @@ -0,0 +1,131 @@ +--- +id: 5d792534857332d07ccba3ad +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md new file mode 100644 index 00000000000..7972802a8b8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md @@ -0,0 +1,133 @@ +--- +id: 5d792534d586ef495ea9df90 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Set `str2` to `infixEval(noHigh, infix)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md new file mode 100644 index 00000000000..f957c47d628 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md @@ -0,0 +1,134 @@ +--- +id: 5d79253410532e13d13fe574 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + applyFn + .toString() + .replace(/\s/g, '') + .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md new file mode 100644 index 00000000000..42b80301fc6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md @@ -0,0 +1,138 @@ +--- +id: 5d7925342415527083bd6667 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: + +```js +"a b c".split(" "); // ["a", "b", "c"]; +``` + +Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md new file mode 100644 index 00000000000..33e85a097cc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md @@ -0,0 +1,142 @@ +--- +id: 5d792534c3d26890ac1484d4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: + +```js +[1, 2, 3].map(x => x + 1); // [2, 3, 4] +``` + +In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md new file mode 100644 index 00000000000..abb91060f5e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md @@ -0,0 +1,139 @@ +--- +id: 5d792534b92f3d1cd4410ce3 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md new file mode 100644 index 00000000000..bb2f8da03a5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md @@ -0,0 +1,140 @@ +--- +id: 5d7925341193948dfe6d76b4 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md new file mode 100644 index 00000000000..f32c582d3ef --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md @@ -0,0 +1,141 @@ +--- +id: 5d792534cf81365cfca58794 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md new file mode 100644 index 00000000000..a460b595da1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md @@ -0,0 +1,139 @@ +--- +id: 5d7925348ee084278ff15556 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. + +Now return `str2.replace(regex, "")` at the end of `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md new file mode 100644 index 00000000000..45e848ecbeb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md @@ -0,0 +1,142 @@ +--- +id: 5d7925348a6a41c32f7a4e3e +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md new file mode 100644 index 00000000000..7394c7c6472 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md @@ -0,0 +1,150 @@ +--- +id: 5d792534408c5be896b0a46e +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. + +Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md new file mode 100644 index 00000000000..c86fe809104 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md @@ -0,0 +1,146 @@ +--- +id: 5d792534f0eda837510e9192 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md new file mode 100644 index 00000000000..bfa91d4503f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md @@ -0,0 +1,150 @@ +--- +id: 5d7925346b911fce161febaf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md new file mode 100644 index 00000000000..24d94216931 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md @@ -0,0 +1,158 @@ +--- +id: 5d79253483eada4dd69258eb +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +`range` should set `arr` to `[start]` and should then return `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constarr=[start]') && + JSON.stringify(range(1)) === '[1]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md new file mode 100644 index 00000000000..4307ef2889a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md @@ -0,0 +1,157 @@ +--- +id: 5d7925342b2b993ef18cd45f +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md new file mode 100644 index 00000000000..0fa8e6fe0fb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md @@ -0,0 +1,170 @@ +--- +id: 5d7925341747ad42b12f8e68 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. + +The `concat` method returns a new array instead of modifying an existing one: + +```js +[1,2,3].concat(4); // [1, 2, 3, 4] +[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] +``` + +Use `concat` instead of `push` to return the result of adding `end` to `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(1, 2)) === '[1,2]' && + code.includes('concat') && + !code.includes('push') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md new file mode 100644 index 00000000000..448578598f5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md @@ -0,0 +1,163 @@ +--- +id: 5d792535b0b3c198ee3ed6f9 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The `concat` method can also accept arrays: + +```js +[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] +[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] +``` + +Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md new file mode 100644 index 00000000000..6e89d44a236 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md @@ -0,0 +1,158 @@ +--- +id: 5d7925357a0533eb221b005d +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('arr') && + code.replace(/\s/g, '').includes('[start].concat([end])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md new file mode 100644 index 00000000000..0d876da26b6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md @@ -0,0 +1,157 @@ +--- +id: 5d792535591db67ee15b4106 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(3, 2)) === '[]' && + JSON.stringify(range(1, 3)) === '[1,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md new file mode 100644 index 00000000000..ee94e71d4a4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md @@ -0,0 +1,154 @@ +--- +id: 5d792535f1f7adf77de5831d +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md new file mode 100644 index 00000000000..497b63c634b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md @@ -0,0 +1,159 @@ +--- +id: 5d7925353d2c505eafd50cd9 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Remove the curly braces and `return` keyword from `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md new file mode 100644 index 00000000000..862a0002f2f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md @@ -0,0 +1,154 @@ +--- +id: 5d79253539b5e944ba3e314c +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md new file mode 100644 index 00000000000..9845839bbeb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md @@ -0,0 +1,156 @@ +--- +id: 5d792535a4f1cbff7a8b9a0b +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Make `charRange` return `range(start, end)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md new file mode 100644 index 00000000000..43167394a7b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md @@ -0,0 +1,156 @@ +--- +id: 5d792535e3304f15a8890162 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md new file mode 100644 index 00000000000..f5bb024255e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md @@ -0,0 +1,160 @@ +--- +id: 5d792535a40ea5ac549d6804 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md new file mode 100644 index 00000000000..8369854b752 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md @@ -0,0 +1,159 @@ +--- +id: 5d7925358c220e5b2998909e +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Now, pass `x` to `String.fromCharCode` in the arrow function. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md new file mode 100644 index 00000000000..6253e20d545 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md @@ -0,0 +1,173 @@ +--- +id: 5d7925357729e183a49498aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md new file mode 100644 index 00000000000..03ceaf96068 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md @@ -0,0 +1,176 @@ +--- +id: 5d79253555aa652afbb68086 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md new file mode 100644 index 00000000000..27b4b66f7f2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md @@ -0,0 +1,176 @@ +--- +id: 5d79253582be306d339564f6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md new file mode 100644 index 00000000000..72223dddb2c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md @@ -0,0 +1,176 @@ +--- +id: 5d7925352047e5c54882c436 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md new file mode 100644 index 00000000000..1870ab8b951 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md @@ -0,0 +1,177 @@ +--- +id: 5d79253568e441c0adf9db9f +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md new file mode 100644 index 00000000000..b394d603ed4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md @@ -0,0 +1,183 @@ +--- +id: 5d7925356ab117923b80c9cd +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md new file mode 100644 index 00000000000..e79d2b6f857 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md @@ -0,0 +1,183 @@ +--- +id: 5d792535e54a8cd729a0d708 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md new file mode 100644 index 00000000000..3d6a5a955b7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md @@ -0,0 +1,187 @@ +--- +id: 5d7925353b307724a462b06b +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Finally, return `fn("A")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md new file mode 100644 index 00000000000..994e931f57f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md @@ -0,0 +1,189 @@ +--- +id: 5d792536735f71d746ee5d99 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. + +Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md new file mode 100644 index 00000000000..b06f86f5495 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md @@ -0,0 +1,184 @@ +--- +id: 5d792536ad340d9dff2e4a96 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Now, remove the curly braces and return statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md new file mode 100644 index 00000000000..d1492aa5cbf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md @@ -0,0 +1,183 @@ +--- +id: 5d7925369614afd92d01fed5 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md new file mode 100644 index 00000000000..8d17549a291 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md @@ -0,0 +1,182 @@ +--- +id: 5d792536504e68254fe02236 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. + +Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md new file mode 100644 index 00000000000..1c388711e2f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md @@ -0,0 +1,186 @@ +--- +id: 5d792536c8d2f0fdfad768fe +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +You can add more arguments by simply adding another arrow with another argument name: + +```js +const manyArguments = a => b => c => d => [a, b, c, d] +``` + +Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md new file mode 100644 index 00000000000..45e6af501cc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md @@ -0,0 +1,182 @@ +--- +id: 5d79253639028b8ec56afcda +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md new file mode 100644 index 00000000000..19bbc068cd3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md @@ -0,0 +1,192 @@ +--- +id: 5d792536834f2fd93e84944f +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +You call curried functions like this: + +```js +const result = add(1)(2); +``` + +Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md new file mode 100644 index 00000000000..e220cf656e5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md @@ -0,0 +1,186 @@ +--- +id: 5d792536ddff9ea73c90a994 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. + +Change `x => elemValue(n)(x)` to `elemValue(n)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md new file mode 100644 index 00000000000..eaff17e3511 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md @@ -0,0 +1,184 @@ +--- +id: 5d7925361596f84067904f7f +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('const fn') && + code.includes('varRangeExpanded') && + evalFormula('A1:J133') === '3' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md new file mode 100644 index 00000000000..03ec1f65ba2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md @@ -0,0 +1,188 @@ +--- +id: 5d792536dd8a4daf255488ac +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md new file mode 100644 index 00000000000..b1139d99d92 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md @@ -0,0 +1,190 @@ +--- +id: 5d792536449c73004f265fb1 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md new file mode 100644 index 00000000000..a481e918c67 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md @@ -0,0 +1,192 @@ +--- +id: 5d79253685fc69b8fe60a0d2 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. + +This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md new file mode 100644 index 00000000000..64e48966f02 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md @@ -0,0 +1,188 @@ +--- +id: 5d792536dc6e3ab29525de9e +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md new file mode 100644 index 00000000000..57da365160d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md @@ -0,0 +1,190 @@ +--- +id: 5d792536cfd0fd893c630abb +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.includes('varRegex') && + code.includes('varExpanded') && + evalFormula('aC12bc') === 'abc' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md new file mode 100644 index 00000000000..2dc9ec5c8ab --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md @@ -0,0 +1,197 @@ +--- +id: 5d7925366a5ff428fb483b40 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md new file mode 100644 index 00000000000..0516f1f77e6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md @@ -0,0 +1,195 @@ +--- +id: 5d7925365d4035eeb2e395fd +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md new file mode 100644 index 00000000000..a1022f45c6a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md @@ -0,0 +1,200 @@ +--- +id: 5d7925364c106e9aaf05a16f +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. + +Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(evalFormula('(2+2)*2') === '8'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md new file mode 100644 index 00000000000..5617221e798 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md @@ -0,0 +1,208 @@ +--- +id: 5d792536970cd8e819cc8a96 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +You can define arrow functions without arguments: + +```js +const two = () => 2; +``` + +Define an empty arrow function without arguments and assign it to `window.onload`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('window.onload=()=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md new file mode 100644 index 00000000000..06b401c7e8e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md @@ -0,0 +1,211 @@ +--- +id: 5d792536e33baeaa60129e0a +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md new file mode 100644 index 00000000000..59443f50dc9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md @@ -0,0 +1,217 @@ +--- +id: 5d7925379e2a488f333e2d43 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Now define a function `createLabel` which takes an argument `name` and has an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md new file mode 100644 index 00000000000..3a3a6f126c8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md @@ -0,0 +1,220 @@ +--- +id: 5d7925379000785f6d8d9af3 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Inside `createLabel`, assign `document.createElement("div")` to `label`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md new file mode 100644 index 00000000000..a9a1dcc5726 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md @@ -0,0 +1,229 @@ +--- +id: 5d79253791391b0acddd0ac5 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Add the following code to `createLabel`: + +```js +label.className = "label"; +label.textContent = name; +container.appendChild(label); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md new file mode 100644 index 00000000000..780a9dab7fe --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md @@ -0,0 +1,225 @@ +--- +id: 5d7925373104ae5ae83f20a5 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +The `forEach` method takes a function and calls it with each element of the array. + +Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md new file mode 100644 index 00000000000..ccfac003142 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md @@ -0,0 +1,225 @@ +--- +id: 5d7925373b7127cfaeb50c26 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). + +# --hints-- + +See description above for instructions. + +```js +assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md new file mode 100644 index 00000000000..5216d89d1d9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md @@ -0,0 +1,230 @@ +--- +id: 5d792537cb3a5cd6baca5e1a +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md new file mode 100644 index 00000000000..544000db907 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md @@ -0,0 +1,232 @@ +--- +id: 5d79253742f3313d55db981f +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md new file mode 100644 index 00000000000..bf8bee8395a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md @@ -0,0 +1,237 @@ +--- +id: 5d7925379e0180a438ce7f95 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md new file mode 100644 index 00000000000..d57aa617713 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md @@ -0,0 +1,239 @@ +--- +id: 5d792537c80984dfa5501b96 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Inside `letters.forEach`, assign `document.createElement("input")` to `input`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md new file mode 100644 index 00000000000..4568ec50b24 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md @@ -0,0 +1,251 @@ +--- +id: 5d7925377b54d8a76efb5657 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Add the following code to `letters.forEach`: + +```js +input.type = "text"; +input.id = y + x; +input.onchange = update; +container.appendChild(input); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md new file mode 100644 index 00000000000..6543d3124fb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md @@ -0,0 +1,251 @@ +--- +id: 5d7925371398513549bb6395 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md new file mode 100644 index 00000000000..378c01975ac --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md @@ -0,0 +1,257 @@ +--- +id: 5d792537ea3eaf302bf2d359 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md new file mode 100644 index 00000000000..93968d4e378 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md @@ -0,0 +1,261 @@ +--- +id: 5d792537533b1c7843bfd029 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +The `includes` method works on a string and checks if the argument is its substring. + +Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md new file mode 100644 index 00000000000..dcc989ea328 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md @@ -0,0 +1,260 @@ +--- +id: 5d792537dc0fe84345d4f19e +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md new file mode 100644 index 00000000000..ce97294c369 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md @@ -0,0 +1,260 @@ +--- +id: 5d792537b6cadae0f4b0cda1 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. + +Use the `slice` method to log the first two letters of `value` to the console. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md new file mode 100644 index 00000000000..1eaf868ad16 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md @@ -0,0 +1,262 @@ +--- +id: 5d79253770083fb730c93a93 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. + +Change the call to `slice` to log all characters except the first instead. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md new file mode 100644 index 00000000000..cd6f2405a86 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md @@ -0,0 +1,266 @@ +--- +id: 5d792537fef76b226b63b93b +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md new file mode 100644 index 00000000000..fb91f29be96 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md @@ -0,0 +1,273 @@ +--- +id: 5d79253760fca25ccbbd8990 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +The array destructuring syntax can be used to extract values from arrays: + +```js +const [x, y] = [1, 2]; // in variables +const fn = ([x, y]) => x + y // in functions +``` + +Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && + spreadsheetFunctions['random']([1, 2]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md new file mode 100644 index 00000000000..c933b24aaac --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md @@ -0,0 +1,267 @@ +--- +id: 5d7925374321824cba309875 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( + code.replace(/\s/g, '') + ) && spreadsheetFunctions['random']([1, 1]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md new file mode 100644 index 00000000000..2a5ee766e3d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md @@ -0,0 +1,276 @@ +--- +id: 5d7925381e8565a5c50ba7f1 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. + +You can check if this is the case by comparing a call to a function with another call (with the same arguments): + +```js +console.log(f(2) === f(2)); // always true for pure functions +``` + +Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md new file mode 100644 index 00000000000..2f419cf2876 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md @@ -0,0 +1,271 @@ +--- +id: 5d7925383f1b77db7f1ff59e +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +This is (probably) false, so `random` is certainly impure. + +The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. + +Call `window.onload()` in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md new file mode 100644 index 00000000000..176257a88b5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md @@ -0,0 +1,268 @@ +--- +id: 5d792538de9fa3f298bcd5f6 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md new file mode 100644 index 00000000000..ad427105522 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md @@ -0,0 +1,270 @@ +--- +id: 5d7925385b74f69642e1fea5 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. + +Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md new file mode 100644 index 00000000000..231159b2b34 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md @@ -0,0 +1,265 @@ +--- +id: 5d7925380ea76d55b2c97d7b +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. + +Remove the `console.log` statement. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.includes('console.log')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md new file mode 100644 index 00000000000..36fd2f83b90 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md @@ -0,0 +1,267 @@ +--- +id: 5d792538be4fe331f1a6c008 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. + +But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. + +Change these calls to `""` - the function is now pure but doesn't work. + +# --hints-- + +See description above for instructions. + +```js +const nos = code.replace(/\s/g, ''); +assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md new file mode 100644 index 00000000000..4b9e711aae6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md @@ -0,0 +1,264 @@ +--- +id: 5d792538d169f33142175b95 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. + +Add an argument `cells` to `evalFormula`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md new file mode 100644 index 00000000000..39584a049ae --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md @@ -0,0 +1,272 @@ +--- +id: 5d792538e48b5a2c6e5bbe12 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md new file mode 100644 index 00000000000..1ab52bf8124 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md @@ -0,0 +1,268 @@ +--- +id: 5d7925387f3e9da5ec856dbe +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Update the recursive call to `evalFormula` by passing in `cells` as the second argument. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md new file mode 100644 index 00000000000..11e0b2d0bbc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md @@ -0,0 +1,269 @@ +--- +id: 5d79253824ae9b4a6e6f3108 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. + +# --hints-- + +See description above for instructions. + +```js +assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md new file mode 100644 index 00000000000..d4c961be237 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md @@ -0,0 +1,275 @@ +--- +id: 5d7925383f122a279f4c54ad +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The `find` method returns the first element of an array that satisfies the function passed to it. + +Chain `find` onto `cells` and pass it `cell => cell === id`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md new file mode 100644 index 00000000000..abdc6794679 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md @@ -0,0 +1,272 @@ +--- +id: 5d7925387b682e962f209269 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md new file mode 100644 index 00000000000..4baca0e6cc3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md @@ -0,0 +1,272 @@ +--- +id: 5d792538de774217b173288e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md new file mode 100644 index 00000000000..a2c5b9b1bef --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md @@ -0,0 +1,269 @@ +--- +id: 5d79253891d93585323d1f3c +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md new file mode 100644 index 00000000000..637af181723 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md @@ -0,0 +1,271 @@ +--- +id: 5d7925384e34e944ecb4612d +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md new file mode 100644 index 00000000000..d12140aa462 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md @@ -0,0 +1,273 @@ +--- +id: 5d792538631844ad0bdfb4c3 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. + +Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md new file mode 100644 index 00000000000..c966a9161ed --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md @@ -0,0 +1,279 @@ +--- +id: 5d792538e2a8d20cc580d481 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +The `slice` method can also work on arrays. + +Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md new file mode 100644 index 00000000000..5483ee8a3e9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md @@ -0,0 +1,285 @@ +--- +id: 5d792538f5004390d6678554 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +You can also pass in a negative argument to `slice` to specify that index from the end: + +```js +[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] +``` + +Use a negative index to add a function `lasttwo` which returns the last two elements of an array. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md new file mode 100644 index 00000000000..3e61d996f85 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md @@ -0,0 +1,288 @@ +--- +id: 5d792539dd4fd4c96fd85f7e +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +The `%` operator returns the remainder: + +```js +4 % 3; // 1 +5 % 3; // 2 +6 % 3; // 0 +``` + +Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. + +# --hints-- + +See description above for instructions. + +```js +assert(isEven(20) && !isEven(31)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md new file mode 100644 index 00000000000..8c4b6a9e314 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md @@ -0,0 +1,292 @@ +--- +id: 5d79253949802f8587c8bbd3 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +The `filter` method keeps only the elements of an array that satisfy the function passed to it: + +```js +[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] +``` + +Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && + code.includes('filter') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md new file mode 100644 index 00000000000..c441a9459d8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md @@ -0,0 +1,297 @@ +--- +id: 5d7925395888767e9304c082 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. + +The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. + +For example, here's how to multiply all the value in an array: + +```js +[2, 3, 4].reduce((a, x) => a * x); // 24 +``` + +Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md new file mode 100644 index 00000000000..787472aea1d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md @@ -0,0 +1,291 @@ +--- +id: 5d7925393b30099e37a34668 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +The `includes` method checks if an element is in an array. + +Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md new file mode 100644 index 00000000000..f032db3ac16 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md @@ -0,0 +1,301 @@ +--- +id: 5d7925398157757b23730fdd +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: + +```js +[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] +// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array +// now it first tries [].concat(1) which works +``` + +Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md new file mode 100644 index 00000000000..6b5714247b5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md @@ -0,0 +1,293 @@ +--- +id: 5d792539de4b9ac14dd40409 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === + '[1,3,5,7,9]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md new file mode 100644 index 00000000000..8f15f9adfd4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md @@ -0,0 +1,298 @@ +--- +id: 5d792539534f1bf991bb987f +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +ES6 introduced a shorthand object literal syntax: + +```js +const a = 10; +const myObject = { a }; +console.log(myObject); // { a: 10 } +``` + +First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. + +# --hints-- + +See description above for instructions. + +```js +assert(sum([1, 2, 3]) === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md new file mode 100644 index 00000000000..eef96f2d471 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md @@ -0,0 +1,293 @@ +--- +id: 5d7925394089b762f93ffa52 +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. + +This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. + +# --hints-- + +See description above for instructions. + +```js +assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md new file mode 100644 index 00000000000..cb3b30d8c4f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md @@ -0,0 +1,298 @@ +--- +id: 5d792539ec758d45a6900173 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. + +As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md new file mode 100644 index 00000000000..621e4cc4fbc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md @@ -0,0 +1,308 @@ +--- +id: 5d7925398d525f61a9ff3a79 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +The spread operator allow you to pass multiple arguments instead of an array: + +```js +const arr = [1, 2, 3]; +const sum3 = (a, b, c) => a + b + c; +sum3(...arr); // 6 +``` + +Use the spread operator to add `range` to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && + code.includes('...') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md new file mode 100644 index 00000000000..8d27ee2bf76 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md @@ -0,0 +1,300 @@ +--- +id: 5d792539a222f385c5c17d2b +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Now define a `median` function which takes an argument `nums` (in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md new file mode 100644 index 00000000000..08ffbd94e4a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md @@ -0,0 +1,312 @@ +--- +id: 5d7925398a7184b41b12a0e0 +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +The `sort` method sorts an array alphabetically: + +```js +["B", "C", "A"].sort(); // ["A", "B", "C"] +``` + +Assign the sorted `nums` to `sorted` in `median`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md new file mode 100644 index 00000000000..49b025f4b1e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md @@ -0,0 +1,318 @@ +--- +id: 5d7925399afb905c34730a75 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: + +```js +[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] +``` + +If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. + +Use `sort` to sort `nums` in ascending order. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md new file mode 100644 index 00000000000..cad2f5aa466 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md @@ -0,0 +1,312 @@ +--- +id: 5d792539728d1aa7788e2c9b +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. + +You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md new file mode 100644 index 00000000000..df39b579f78 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md @@ -0,0 +1,312 @@ +--- +id: 5d79253939434a2724c0ec41 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md new file mode 100644 index 00000000000..1e4f1aca372 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md @@ -0,0 +1,311 @@ +--- +id: 5d792539b9e1d3c54d8fe94a +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Add a return statement to `median` so that it returns `isEven(length)`. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md new file mode 100644 index 00000000000..4cf66a6dd6a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md @@ -0,0 +1,316 @@ +--- +id: 5d792539b2e0bd8f9e8213e4 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. + +Note that the `middle` variable is close to the middle but is not actually the middle. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md new file mode 100644 index 00000000000..2428ff3a79d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md @@ -0,0 +1,320 @@ +--- +id: 5d792539239148965a1a59a5 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.median([1, 20, 3]) === 3 && + spreadsheetFunctions.median([27, 7, 20, 10]) === 15 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md new file mode 100644 index 00000000000..ff91ae909fd --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md @@ -0,0 +1,325 @@ +--- +id: 5d792539e1446045d0df6d28 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +The `some` method checks if any element of the array satisfies the provided testing function. + +Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.someeven([1, 5, 4, 3]) && + !spreadsheetFunctions.someeven([3, 5, 9]) && + code.includes('.some') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md new file mode 100644 index 00000000000..ddede0016d6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md @@ -0,0 +1,327 @@ +--- +id: 5d79253a2febbb77098730b9 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +The `every` method checks if all elements of an array satisfy the provided testing function. + +Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && + !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && + code.includes('.every') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md new file mode 100644 index 00000000000..c475cf8ba22 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md @@ -0,0 +1,328 @@ +--- +id: 5d79253a98bd9fdf7ce68d0a +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. + +While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. + +Replace the body of `range` with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md new file mode 100644 index 00000000000..52e294c3655 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md @@ -0,0 +1,324 @@ +--- +id: 5d79253a1e9abf29de64c177 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. + +Make `range` return an array of `undefined` with size `end - start + 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md new file mode 100644 index 00000000000..ce1e1c87c73 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md @@ -0,0 +1,327 @@ +--- +id: 5d79253a8b29d78984369e4b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +The `fill` method takes an argument and replaces all elements of the array with that argument. + +Use it on the array in `range` to replace everything with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md new file mode 100644 index 00000000000..9630c3210b7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md @@ -0,0 +1,330 @@ +--- +id: 5d79253ad297a31cbe073718 +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +The function in the `map` method can actually take a second argument: the index of the element. + +This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). + +Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md new file mode 100644 index 00000000000..7531f12a5a3 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md @@ -0,0 +1,316 @@ +--- +id: 5dc10b8b93704f41d279eb5b +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-001.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-001.md new file mode 100644 index 00000000000..737056e9343 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-001.md @@ -0,0 +1,33 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9de +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. + +First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. + +# --hints-- + +test-text + +```js +assert(//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-002.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-002.md new file mode 100644 index 00000000000..e69a56a6c39 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-002.md @@ -0,0 +1,43 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9df +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. + +# --hints-- + +test-text + +```js +assert( + /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( + code + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + + + + + + + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-003.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-003.md new file mode 100644 index 00000000000..4060dac9f7c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-003.md @@ -0,0 +1,51 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e0 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the head, add a `title` of `D3 Dashboard`. + +# --hints-- + +test-text + +```js +assert( + /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-004.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-004.md new file mode 100644 index 00000000000..92d0e9e6672 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-004.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e1 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. + +# --hints-- + +test-text + +```js +const link = code.match(/]>/gi)[0]; +assert( + /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && + /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-005.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-005.md new file mode 100644 index 00000000000..126ee1afb77 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-005.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e2 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. + +# --hints-- + +test-text + +```js +assert($('div.dashboard').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-006.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-006.md new file mode 100644 index 00000000000..8d2dc0f0fc2 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-006.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-007.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-007.md new file mode 100644 index 00000000000..9c9637a79da --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-007.md @@ -0,0 +1,66 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('width') === '980px' && dashboard.css('height') === '500px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-008.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-008.md new file mode 100644 index 00000000000..f30f2278512 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-008.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e5 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('background-color') === 'rgb(255, 255, 255)' && + dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-009.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-009.md new file mode 100644 index 00000000000..a9e92dd79e5 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-009.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e6 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. + +# --hints-- + +test-text + +```js +const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; +assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-010.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-010.md new file mode 100644 index 00000000000..a5ebf98f5a0 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-010.md @@ -0,0 +1,75 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e7 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give the container some space by adding a `padding` of `100px 10px` to the `body` element. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-011.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-011.md new file mode 100644 index 00000000000..e852c01758e --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-011.md @@ -0,0 +1,81 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e8 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('display') === 'flex' && + dashboard.css('align-items') === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-012.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-012.md new file mode 100644 index 00000000000..c087db365e8 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-012.md @@ -0,0 +1,79 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e9 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[0]; +assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-013.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-013.md new file mode 100644 index 00000000000..1900674079c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-013.md @@ -0,0 +1,96 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ea +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. + +This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[1]; +assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-014.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-014.md new file mode 100644 index 00000000000..934305ffeb0 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-014.md @@ -0,0 +1,95 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9eb +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[2]; +assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-015.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-015.md new file mode 100644 index 00000000000..6972bb06c2a --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-015.md @@ -0,0 +1,103 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ec +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. + +In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. + +The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. + +# --hints-- + +test-text + +```js +assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-016.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-016.md new file mode 100644 index 00000000000..c518fc0fd82 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-016.md @@ -0,0 +1,108 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ed +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. + +# --hints-- + +test-text + +```js +assert( + twitterColor === '#7cd9d1' && + tumblrColor === '#f6dd71' && + instagramColor === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-017.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-017.md new file mode 100644 index 00000000000..8537b5c634a --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-017.md @@ -0,0 +1,113 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ee +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: + +```js +const variableName = d3.select('.className') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('.dashboard')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-018.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-018.md new file mode 100644 index 00000000000..e034d250e57 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-018.md @@ -0,0 +1,117 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ef +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: + +```js +const variableName = d3.select('selectedElement') + .append('elementToAdd') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('svg')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-019.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-019.md new file mode 100644 index 00000000000..71a9b118ed1 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-019.md @@ -0,0 +1,124 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. + +`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: + +```js +const variableName = d3.select('element') + .append('element') + .attr('attribute', 'value') +``` + +Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.width.value === '700'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-020.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-020.md new file mode 100644 index 00000000000..64d86709ab6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-020.md @@ -0,0 +1,116 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f1 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.height.value === '500'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-021.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-021.md new file mode 100644 index 00000000000..06bcb3f2432 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-021.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f2 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. + +Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. + +# --hints-- + +test-text + +```js +assert( + typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-022.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-022.md new file mode 100644 index 00000000000..20a021de05d --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-022.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. + +# --hints-- + +test-text + +```js +const domain = yScale.domain(); +assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-023.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-023.md new file mode 100644 index 00000000000..e7a769694bf --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-023.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. + +Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. + +Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. + +# --hints-- + +test-text + +```js +const range = yScale.range(); +assert(range.length === 2 && range[0] === 430 && range[1] === 70); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-024.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-024.md new file mode 100644 index 00000000000..bfb5cb47cf4 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-024.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f5 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. + +# --hints-- + +test-text + +```js +assert( + typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-025.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-025.md new file mode 100644 index 00000000000..0ad79254818 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-025.md @@ -0,0 +1,131 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. + +# --hints-- + +test-text + +```js +const domain = xScale.domain(); +assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-026.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-026.md new file mode 100644 index 00000000000..c2eda71b4f8 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-026.md @@ -0,0 +1,133 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f7 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. + +# --hints-- + +test-text + +```js +const range = xScale.range(); +assert(range.length === 2 && range[0] === 70 && range[1] === 630); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-027.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-027.md new file mode 100644 index 00000000000..fadf8788314 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-027.md @@ -0,0 +1,138 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f8 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. + +# --hints-- + +test-text + +```js +assert( + typeof yAxis === 'function' && + /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-028.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-028.md new file mode 100644 index 00000000000..3c6e36d9cc2 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-028.md @@ -0,0 +1,142 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f9 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. + +# --hints-- + +test-text + +```js +assert( + typeof xAxis === 'function' && + /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-029.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-029.md new file mode 100644 index 00000000000..aae1810fbf7 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-029.md @@ -0,0 +1,143 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fa +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". + +# --hints-- + +test-text + +```js +assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-030.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-030.md new file mode 100644 index 00000000000..5a8d4514367 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-030.md @@ -0,0 +1,147 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fb +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. + +# --hints-- + +test-text + +```js +assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-031.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-031.md new file mode 100644 index 00000000000..94721751a99 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fc +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. + +Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-032.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-032.md new file mode 100644 index 00000000000..1482a45c496 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-032.md @@ -0,0 +1,150 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fd +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-033.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-033.md new file mode 100644 index 00000000000..838f00a1e26 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-033.md @@ -0,0 +1,153 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fe +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 13); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-034.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-034.md new file mode 100644 index 00000000000..ffd84f411a9 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-034.md @@ -0,0 +1,156 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ff +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 22); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-035.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-035.md new file mode 100644 index 00000000000..e5afa9d8688 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-035.md @@ -0,0 +1,158 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca00 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. + +# --hints-- + +test-text + +```js +assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-036.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-036.md new file mode 100644 index 00000000000..61a26b75fff --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-036.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca01 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: + +```js +.selectAll('element') +``` + +# --hints-- + +test-text + +```js +assert( + /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-037.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-037.md new file mode 100644 index 00000000000..194e3ad318c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-037.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca02 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.transform === 'translate(-12px) rotate(-50deg)' || + index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-038.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-038.md new file mode 100644 index 00000000000..b17ce9013b1 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-038.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca03 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => index.style['text-anchor'] === 'end' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-039.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-039.md new file mode 100644 index 00000000000..2025374c7a1 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-039.md @@ -0,0 +1,173 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca04 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. + +You will add some hover effects later, so the pointer will make for a better experience. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.cursor === 'pointer' && index.style.font === '10px verdana' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-040.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-040.md new file mode 100644 index 00000000000..52d9a027fd4 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-040.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca05 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. + +The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert( + ticks[0].innerHTML === '0k' && + ticks[1].innerHTML === '1k' && + ticks[2].innerHTML === '2k' && + ticks[3].innerHTML === '3k' && + ticks[4].innerHTML === '4k' && + ticks[5].innerHTML === '5k' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-041.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-041.md new file mode 100644 index 00000000000..82a3261d9b5 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-041.md @@ -0,0 +1,171 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca06 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-042.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-042.md new file mode 100644 index 00000000000..aa8a37baf20 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-042.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca07 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. + +# --hints-- + +test-text + +```js +assert( + /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-043.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-043.md new file mode 100644 index 00000000000..a91e12f41e6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-043.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca08 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. + +# --hints-- + +test-text + +```js +assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-044.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-044.md new file mode 100644 index 00000000000..5a93e72d48f --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-044.md @@ -0,0 +1,192 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca09 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: + +```js +.x(d => d.year) +``` + +You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). + +This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. + +# --hints-- + +test-text + +```js +assert( + /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-045.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-045.md new file mode 100644 index 00000000000..e07ef7245ce --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0a +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. + +In the "d function" you created, return `xScale(d.year)` instead of `d.year`. + +# --hints-- + +test-text + +```js +assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-046.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-046.md new file mode 100644 index 00000000000..9ba6b01ac8e --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-046.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0b +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. + +This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. + +These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-047.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-047.md new file mode 100644 index 00000000000..27b6eb3229d --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-047.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0c +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 3 && + /lineGraph\.append\((`|'|")path\1\)/gi.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-048.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-048.md new file mode 100644 index 00000000000..0af7e8110d7 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0d +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. + +Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". + +After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. + +# --hints-- + +test-text + +```js +assert($('svg path')[2].getAttribute('d').length === 151); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-049.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-049.md new file mode 100644 index 00000000000..880f7b5d0a6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0e +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const twitterPath = $('svg path')[2]; +assert( + twitterPath.getAttribute('stroke') === '#7cd9d1' && + twitterPath.getAttribute('stroke-width') == '3' && + twitterPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-050.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-050.md new file mode 100644 index 00000000000..21584d84adf --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-050.md @@ -0,0 +1,198 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0f +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. + +# --hints-- + +test-text + +```js +assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-051.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-051.md new file mode 100644 index 00000000000..3c1c0750188 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-051.md @@ -0,0 +1,204 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca10 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculate their values just like you did for the Twitter line. + +# --hints-- + +test-text + +```js +assert( + /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-052.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-052.md new file mode 100644 index 00000000000..74a4638e890 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca11 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculate their values just like you did for the Twitter line. + +The x values for each line will be the same, but the y values will use the data from the different platforms. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-053.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-053.md new file mode 100644 index 00000000000..746e1ab4b1a --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-053.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca12 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 4 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-054.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-054.md new file mode 100644 index 00000000000..695da3fee70 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-054.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca13 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. + +# --hints-- + +test-text + +```js +assert($('svg path')[3].getAttribute('d').length === 115); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-055.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-055.md new file mode 100644 index 00000000000..a200a166f95 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-055.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca14 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const tumblrPath = $('svg path')[3]; +assert( + tumblrPath.getAttribute('stroke') === '#f6dd71' && + tumblrPath.getAttribute('stroke-width') == '3' && + tumblrPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-056.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-056.md new file mode 100644 index 00000000000..c4f75859463 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-056.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca15 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. + +# --hints-- + +test-text + +```js +assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-057.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-057.md new file mode 100644 index 00000000000..59e2b7b22ca --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-057.md @@ -0,0 +1,226 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca16 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Appropriately set the `x` values for `instagramLine` like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-058.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-058.md new file mode 100644 index 00000000000..ad99613e2db --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-058.md @@ -0,0 +1,229 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca17 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-059.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-059.md new file mode 100644 index 00000000000..fe46511da37 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-059.md @@ -0,0 +1,231 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca18 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 5 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-060.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-060.md new file mode 100644 index 00000000000..5863f052f3d --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-060.md @@ -0,0 +1,230 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca19 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. + +# --hints-- + +test-text + +```js +assert($('svg path')[4].getAttribute('d').length === 171); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-061.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-061.md new file mode 100644 index 00000000000..45e97e2ba69 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-061.md @@ -0,0 +1,239 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1a +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. + +# --hints-- + +test-text + +```js +const instagramPath = $('svg path')[4]; +assert( + instagramPath.getAttribute('stroke') === '#fd9b98' && + instagramPath.getAttribute('stroke-width') == '3' && + instagramPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-062.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-062.md new file mode 100644 index 00000000000..82eef8d81e7 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-062.md @@ -0,0 +1,247 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1b +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: + +```js +lineGraph.selectAll('twitter-circles') +``` + +`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-063.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-063.md new file mode 100644 index 00000000000..942bc905877 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-063.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1c +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Add the D3 `data` function to your selection and pass it the data array like this: + +```js +.data(data) +``` + +# --hints-- + +test-text + +```js +assert(/\.data\s*\(\s*data\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-064.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-064.md new file mode 100644 index 00000000000..db5343e098f --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-064.md @@ -0,0 +1,248 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1d +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Next, chain the `enter()` function to the selection. + +The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. + +In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. + +# --hints-- + +test-text + +```js +assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-065.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-065.md new file mode 100644 index 00000000000..609632232b4 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-065.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1e +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-066.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-066.md new file mode 100644 index 00000000000..d5291b996da --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-066.md @@ -0,0 +1,250 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. + +Use the `attr` function to set the `cx` to `d => xScale(d.year)`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cx') == '70'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-067.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-067.md new file mode 100644 index 00000000000..f8b852ac2b8 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-067.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca20 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. + +As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cy') == '243.232'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-068.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-068.md new file mode 100644 index 00000000000..ad9dfcf5dfc --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-068.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca21 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('r') == '6'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-069.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-069.md new file mode 100644 index 00000000000..9d2d9c5b0b0 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-069.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca22 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[0].getAttribute('fill') === 'white' && + $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-070.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-070.md new file mode 100644 index 00000000000..e8beb17a75b --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-070.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca23 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-071.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-071.md new file mode 100644 index 00000000000..25b5c92d036 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-071.md @@ -0,0 +1,263 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca24 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-072.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-072.md new file mode 100644 index 00000000000..b5eee1874d9 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-072.md @@ -0,0 +1,268 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca25 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. + +Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 18); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-073.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-073.md new file mode 100644 index 00000000000..4d3a27e49d0 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-073.md @@ -0,0 +1,274 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca26 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('cx') == '70' && + $('svg circle')[9].getAttribute('cy') == '401.128' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-074.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-074.md new file mode 100644 index 00000000000..df1221f436d --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-074.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca27 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('r') == '6' && + $('svg circle')[9].getAttribute('fill') === 'white' && + $('svg circle')[9].getAttribute('stroke') === '#f6dd71' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-075.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-075.md new file mode 100644 index 00000000000..53c158898b0 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-075.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca28 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Set the `cursor` to `pointer` using the `style` function. + +# --hints-- + +test-text + +```js +assert($('svg circle')[9].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-076.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-076.md new file mode 100644 index 00000000000..dfef7440d25 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-076.md @@ -0,0 +1,287 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca29 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-077.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-077.md new file mode 100644 index 00000000000..5ed00425a75 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-077.md @@ -0,0 +1,288 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2a +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 27); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-078.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-078.md new file mode 100644 index 00000000000..fea82b1f06f --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-078.md @@ -0,0 +1,296 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2b +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Appropriately set the `cx` and `cy` attributes for the Instagram circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('cx') == '70' && + $('svg circle')[18].getAttribute('cy') == '424.024' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-079.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-079.md new file mode 100644 index 00000000000..36c953d0596 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-079.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2c +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('r') == '6' && + $('svg circle')[18].getAttribute('fill') === 'white' && + $('svg circle')[18].getAttribute('stroke') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-080.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-080.md new file mode 100644 index 00000000000..08a57df3f2f --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-080.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2d +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Apply the appropriate `cursor` style for these circles. + +# --hints-- + +test-text + +```js +assert($('svg circle')[18].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-081.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-081.md new file mode 100644 index 00000000000..14ffc2dbaf6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-081.md @@ -0,0 +1,309 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. + +# --hints-- + +test-text + +```js +assert( + /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-082.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-082.md new file mode 100644 index 00000000000..ef8009859e8 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-082.md @@ -0,0 +1,312 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2f +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. + +# --hints-- + +test-text + +```js +assert( + /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-083.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-083.md new file mode 100644 index 00000000000..43e8ea22992 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-083.md @@ -0,0 +1,315 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca30 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-084.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-084.md new file mode 100644 index 00000000000..1e01a5f30ff --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-084.md @@ -0,0 +1,318 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca31 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. + +# --hints-- + +test-text + +```js +assert( + $('svg')[1].getAttribute('width') == '200' && + $('svg')[1].getAttribute('height') == '200' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-085.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-085.md new file mode 100644 index 00000000000..33057ce9acc --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-085.md @@ -0,0 +1,319 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca32 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-086.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-086.md new file mode 100644 index 00000000000..fc228825cc5 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-086.md @@ -0,0 +1,324 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca33 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-087.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-087.md new file mode 100644 index 00000000000..bf1d3f754da --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-087.md @@ -0,0 +1,328 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca34 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-088.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-088.md new file mode 100644 index 00000000000..73bf1cd804a --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-088.md @@ -0,0 +1,329 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca35 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. + +In this case, each platform of followers you have will map directly to a single color with nothing in between. + +# --hints-- + +test-text + +```js +assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-089.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-089.md new file mode 100644 index 00000000000..20900e45822 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-089.md @@ -0,0 +1,334 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca36 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. + +# --hints-- + +test-text + +```js +assert( + /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-090.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-090.md new file mode 100644 index 00000000000..a4a80c7f95d --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-090.md @@ -0,0 +1,336 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca37 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. + +# --hints-- + +test-text + +```js +assert( + /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-091.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-091.md new file mode 100644 index 00000000000..8a4e9aab0a3 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-091.md @@ -0,0 +1,335 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca38 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-092.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-092.md new file mode 100644 index 00000000000..84edb9a9490 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-092.md @@ -0,0 +1,344 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca39 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. + +In a few steps, you will make an array out of your data variable that will be passed to this function. + +# --hints-- + +test-text + +```js +assert( + /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-093.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-093.md new file mode 100644 index 00000000000..781851c9440 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-093.md @@ -0,0 +1,345 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3a +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-094.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-094.md new file mode 100644 index 00000000000..58dc3df6029 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-094.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3b +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-095.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-095.md new file mode 100644 index 00000000000..857d79ad14b --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-095.md @@ -0,0 +1,367 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3c +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: + +```js +d3.entries(data[8].followers)) +``` + +The array it builds looks like this: + +```js +[ + { key: 'twitter', value: 2845 }, + { key: 'tumblr', value: 2040 }, + { key: 'instagram', value: 4801 } +] +``` + +This is where the `value` comes from in your `pie` variable. + +Add the `d3.entries` function as your `pie` argument. Use it to create the above array. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-096.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-096.md new file mode 100644 index 00000000000..19400c8460f --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-096.md @@ -0,0 +1,350 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. + +# --hints-- + +test-text + +```js +assert( + /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-097.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-097.md new file mode 100644 index 00000000000..b94dc14b7b7 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-097.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3e +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Use `append` to add three `g` elements for the pie. + +# --hints-- + +test-text + +```js +assert($('svg g').length === 20); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-098.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-098.md new file mode 100644 index 00000000000..8b1e882f741 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-098.md @@ -0,0 +1,351 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3f +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-099.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-099.md new file mode 100644 index 00000000000..7c2fdc874d7 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-099.md @@ -0,0 +1,352 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca40 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. + +# --hints-- + +test-text + +```js +assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-100.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-100.md new file mode 100644 index 00000000000..ff80e8cbead --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-100.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca41 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. + +Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g')[0].getAttribute('transform'); +assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-101.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-101.md new file mode 100644 index 00000000000..69a67b1c697 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-101.md @@ -0,0 +1,377 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca42 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('fill') === '#7cd9d1' && + pathsArr[1].getAttribute('fill') === '#f6dd71' && + pathsArr[2].getAttribute('fill') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-102.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-102.md new file mode 100644 index 00000000000..c35673b4338 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-102.md @@ -0,0 +1,364 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca43 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Next, set the `stroke` to `white` and the `stroke-width` to `2`. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('stroke') === 'white' && + pathsArr[0].getAttribute('stroke-width') == 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-103.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-103.md new file mode 100644 index 00000000000..b4d01a98916 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-103.md @@ -0,0 +1,365 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca44 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-104.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-104.md new file mode 100644 index 00000000000..f3f23bf2a8c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-104.md @@ -0,0 +1,381 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca47 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: + +```js +.text(d => { + +}) +``` + +The method for getting the percent of each slice will take a few steps: + +1. Find the total number of followers for the displayed year +2. Divide the followers of a single platform by that total +3. Turn it into a string to display + +# --hints-- + +test-text + +```js +assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-105.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-105.md new file mode 100644 index 00000000000..7dd7bc8f459 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-105.md @@ -0,0 +1,383 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca48 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: + +```js +d3.values(data[8].followers) +``` + +It will be an array with the values of the followers for the three platforms in 2020. + +Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. + +# --hints-- + +test-text + +```js +assert( + /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-106.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-106.md new file mode 100644 index 00000000000..1e304f5fbb6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-106.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca49 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. + +# --hints-- + +test-text + +```js +assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-107.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-107.md new file mode 100644 index 00000000000..9fcc056c466 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-107.md @@ -0,0 +1,376 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4a +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-108.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-108.md new file mode 100644 index 00000000000..124a7abec7e --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-108.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4b +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: + +```js +${Math.round(percent * 100)}% +``` + +Don't forget that you need a `return` statement here since you aren't using an implicit return. + +# --hints-- + +test-text + +```js +assert( + /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-109.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-109.md new file mode 100644 index 00000000000..de9a3090429 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-109.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4c +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` + +The `centroid` function will find the midpoint of each slice for each text element. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g text')[0] + .getAttribute('transform') + .replace('translate(', '') + .replace(')', '') + .split(','); +assert(transform[0] < 39 && transform[1] > 31); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-110.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-110.md new file mode 100644 index 00000000000..cfe05994783 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-110.md @@ -0,0 +1,389 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4d +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. + +After that, set the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +const text = $('.dashboard div svg g text')[0]; +assert( + text.style.textAnchor === 'middle' && + text.style.font.toLowerCase() === '10px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-111.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-111.md new file mode 100644 index 00000000000..5a6cda0ba57 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-111.md @@ -0,0 +1,391 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-112.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-112.md new file mode 100644 index 00000000000..be844c9e21c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-112.md @@ -0,0 +1,394 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the table a `width` of `200` and a `height` of `120` using `attr`. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert( + table.getAttribute('width') == 200 && table.getAttribute('height') == 120 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-113.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-113.md new file mode 100644 index 00000000000..439b742b887 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-113.md @@ -0,0 +1,396 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca50 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Set the `font` to `12px verdana` using the `style` function. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-114.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-114.md new file mode 100644 index 00000000000..1be90df8df5 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-114.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca51 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-115.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-115.md new file mode 100644 index 00000000000..df269c6462c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-115.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca52 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-116.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-116.md new file mode 100644 index 00000000000..eb6c7d09187 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-116.md @@ -0,0 +1,404 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca53 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +Use the `text` function to set the text of the selection to `2020 followers`. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').text() === '2020 followers'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-117.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-117.md new file mode 100644 index 00000000000..7c19f3dcae6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-117.md @@ -0,0 +1,406 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca54 +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-118.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-118.md new file mode 100644 index 00000000000..0cfe9b5a70a --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-118.md @@ -0,0 +1,412 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca55 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-119.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-119.md new file mode 100644 index 00000000000..bcdec5c5339 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-119.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca56 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +Add a `selectAll` function to the selection and pass it the string `tr`. + +# --hints-- + +test-text + +```js +assert( + /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-120.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-120.md new file mode 100644 index 00000000000..4ee832321fb --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-120.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca57 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. + +# --hints-- + +test-text + +```js +assert( + /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-121.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-121.md new file mode 100644 index 00000000000..e03bdbdb791 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-121.md @@ -0,0 +1,418 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca58 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-122.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-122.md new file mode 100644 index 00000000000..ed855f5024f --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-122.md @@ -0,0 +1,422 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca59 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-123.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-123.md new file mode 100644 index 00000000000..7c8fd63c36c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-123.md @@ -0,0 +1,426 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5a +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-124.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-124.md new file mode 100644 index 00000000000..721d4428093 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-124.md @@ -0,0 +1,431 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5b +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[0] + .getAttribute('align') + .toLowerCase() === 'right' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-125.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-125.md new file mode 100644 index 00000000000..565a8dc72fe --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-125.md @@ -0,0 +1,430 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5c +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-126.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-126.md new file mode 100644 index 00000000000..cb21e05cc6a --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-126.md @@ -0,0 +1,437 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5d +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +Set the `align` attribute to `center`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[1] + .getAttribute('align') + .toLowerCase() === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-127.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-127.md new file mode 100644 index 00000000000..90544de2a70 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-127.md @@ -0,0 +1,435 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5e +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Append a `div` element to the selection. Each `div` will be a small square for each color. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td div').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-128.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-128.md new file mode 100644 index 00000000000..bd8711a89b8 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-128.md @@ -0,0 +1,438 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5f +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +Set the `width` to `16px` and the `height` to `16px` using the `style` function. + +# --hints-- + +test-text + +```js +const div = $('.dashboard div table tbody tr td div')[0]; +assert(div.style.width == '16px' && div.style.height === '16px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-129.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-129.md new file mode 100644 index 00000000000..3c351a7399a --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-129.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca60 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td div')[0].style.backgroundColor === + 'rgb(124, 217, 209)' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-130.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-130.md new file mode 100644 index 00000000000..bace7d9779c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-130.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca61 +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-131.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-131.md new file mode 100644 index 00000000000..e508369e164 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-131.md @@ -0,0 +1,446 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca62 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Set the `text` to a "d function" that returns the value(`d.value`) for each data point. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-132.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-132.md new file mode 100644 index 00000000000..d3f68fb936c --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-132.md @@ -0,0 +1,450 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca63 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Set the `align` attribute to `left` for this selection. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[2] + .getAttribute('align') + .toLowerCase() === 'left' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-133.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-133.md new file mode 100644 index 00000000000..6fe0e8de953 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-133.md @@ -0,0 +1,448 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca64 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const th = $('.dashboard div table thead tr th')[0]; +assert(th.style.position === 'relative' && th.style.left === '20px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-134.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-134.md new file mode 100644 index 00000000000..03e36d189a6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-134.md @@ -0,0 +1,453 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca65 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert(table.style.position === 'relative' && table.style.top === '30px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-135.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-135.md new file mode 100644 index 00000000000..a6c4b6fb870 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-135.md @@ -0,0 +1,464 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca66 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const pieGraph = $('.dashboard div svg')[0]; +assert( + pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-136.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-136.md new file mode 100644 index 00000000000..139d0e87f65 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-136.md @@ -0,0 +1,476 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca67 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. + +Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. + +# --hints-- + +test-text + +```js +assert( + typeof drawDashboard === 'function' && + /<\/script>\s* + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-137.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-137.md new file mode 100644 index 00000000000..a690b7567e6 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-137.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca68 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. + +Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: + +```js +array.findIndex(d => + // find the index where the year passed to + // drawDashboard equals the year of the array +) +``` + +After this, you will be able to use `data[index]` to get that item in the array. + +# --hints-- + +test-text + +```js +assert.match(code,/const index = data.findIndex\(\(?d\)? => (year === d\.year|d.year === year)\s*\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-138.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-138.md new file mode 100644 index 00000000000..054da5d15a2 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-138.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6a +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. + +The five spots are: + +1. The `domain` for `pieColors`. +2. The `data` for `pieGraphData`. +3. The `text` for your pie slice text. +4. The `data` for your `legendRows`. + +# --hints-- + +test-text + +```js +assert( + !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-139.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-139.md new file mode 100644 index 00000000000..5630a5404bb --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-139.md @@ -0,0 +1,482 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: + +```js +.on('mouseover', d => drawDashboard(d)) +``` + +So now, when you hover a label, the function will be called with the year that is being hovered. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\)\)/g + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-140.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-140.md new file mode 100644 index 00000000000..45fd59a633e --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-140.md @@ -0,0 +1,477 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6c +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. + +Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. + +# --hints-- + +test-text + +```js +assert.match(code, /d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-141.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-141.md new file mode 100644 index 00000000000..0c9593756d7 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-141.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6d +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Now when you hover a label, you can see the data for the different years. + +Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. + +To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. + +Here's a hint: + +```js +.style('font', d => d === year ? ) +``` + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg g text')).filter( + (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-142.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-142.md new file mode 100644 index 00000000000..bee3e7b5989 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-142.md @@ -0,0 +1,478 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6e +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/ +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-143.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-143.md new file mode 100644 index 00000000000..0cfeac007dc --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-143.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6f +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg circle')).filter( + (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-144.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-144.md new file mode 100644 index 00000000000..97348bc5be8 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-144.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca70 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. + +After that, you will be able hover any of the circles or year labels to get the information for that year. + +# --hints-- + +test-text + +```js +assert.equal( + code.match( + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/g + )?.length, 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-145.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-145.md new file mode 100644 index 00000000000..3bf1fb49e15 --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-145.md @@ -0,0 +1,494 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca71 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. + +Then, all of the circles will get filled in for the currently displayed year. + +# --hints-- + +test-text + +```js +const circles = Object.values($('.dashboard svg circle')); +assert( + circles.filter( + (el) => + el.getAttribute && + (el.getAttribute('fill') === '#7cd9d1' || + el.getAttribute('fill') === '#f6dd71' || + el.getAttribute('fill') === '#fd9b98') + ).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-146.md b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-146.md new file mode 100644 index 00000000000..d9c3208306e --- /dev/null +++ b/curriculum/challenges/chinese/04-data-visualization/d3-dashboard/step-146.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca72 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. + +That's it, your dashboard is finished! Don't forget to admire your hard work. + +# --hints-- + +test-text + +```js +assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/algorithms/implement-binary-search.md b/curriculum/challenges/chinese/10-coding-interview-prep/algorithms/implement-binary-search.md new file mode 100644 index 00000000000..bd2e8306ee1 --- /dev/null +++ b/curriculum/challenges/chinese/10-coding-interview-prep/algorithms/implement-binary-search.md @@ -0,0 +1,155 @@ +--- +id: 61abc7ebf3029b56226de5b6 +title: Implement Binary Search +challengeType: 1 +forumTopicId: 487618 +dashedName: implement-binary-search +--- + +# --description-- + +Binary search is an **O(log(n))** efficiency algorithm for searching a sorted array to find an element. It operates using the following steps: + +1. Find the middle `value` of a sorted array. If `value == target` return (found it!). +1. If middle `value < target`, search right half of array in next compare. +1. If middle `value > target`, search left half of array in next compare. + +As you can see, you are successively halving an array, which gives you the log(n) efficiency. For this challenge, we want you to show your work - how you got to the target value... the path you took! + +# --instructions-- + +Write a function `binarySearch` that implements the binary search algorithm on an array, returning the path you took (each middle value comparison) to find the target in an array. + +The function takes a sorted array of integers and a target value as input. It returns an array containing (in-order) the middle value you found at each halving of the original array until you found the target value. The target value should be the last element of the returned array. If value not is found, return the string `Value Not Found`. + +For example, `binarySearch([1,2,3,4,5,6,7], 5)` would return `[4,6,5]`. + +For this challenge, when halving, you MUST use `Math.floor()` when doing division: `Math.floor(x/2)`. This will give a consistent, testable path. + +**Note:** The following array will be used in tests: + +```js +const testArray = [ + 0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, + 23, 49, 70 +]; +``` + +# --hints-- + +`binarySearch` should be a function. + +```js +assert(typeof binarySearch == 'function'); +``` + +`binarySearch(testArray, 0)` should return `[13, 5, 2, 0]`. + +```js +assert.deepEqual(binarySearch(_testArray, 0), [13, 5, 2, 0]); +``` + +`binarySearch(testArray, 1)` should return `[13, 5, 2, 0, 1]`. + +```js +assert.deepEqual(binarySearch(_testArray, 1), [13, 5, 2, 0, 1]); +``` + + +`binarySearch(testArray, 2)` should return `[13, 5, 2]`. + +```js +assert.deepEqual(binarySearch(_testArray, 2), [13, 5, 2]); +``` + +`binarySearch(testArray, 6)` should return the string `Value Not Found`. + +```js +assert.strictEqual(binarySearch(_testArray, 6), 'Value Not Found'); +``` + +`binarySearch(testArray, 11)` should return `[13, 5, 10, 11]`. + +```js +assert.deepEqual(binarySearch(_testArray, 11), [13, 5, 10, 11]) +``` + +`binarySearch(testArray, 13)` should return `[13]`. + +```js +assert.deepEqual(binarySearch(_testArray, 13), [13]); +``` + +`binarySearch(testArray, 70)` should return `[13, 19, 22, 49, 70]`. + +```js +assert.deepEqual(binarySearch(_testArray, 70), [13, 19, 22, 49, 70]); +``` + +# --seed-- + +## --after-user-code-- + +```js +const _testArray = [ + 0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, + 23, 49, 70 +]; +``` + +## --seed-contents-- + +```js +function binarySearch(searchList, value) { + let arrayPath = []; + return arrayPath; +} +``` + + + +# --solutions-- + +```js +let binarySearch = (searchList, value) => { + let arrayPath = []; + + // set initial L - M - R + let left = 0; + let right = searchList.length - 1; + let middle = Math.floor(right / 2); + + // if first comparison finds value + if (searchList[middle] == value) { + arrayPath.push(searchList[middle]); + return arrayPath; + } + + while (searchList[middle] !== value) { + // add to output array + arrayPath.push(searchList[middle]); + + // not found + if (right < left) { + return 'Value Not Found'; + } + // value is in left or right portion of array + // update L - M - R + if (searchList[middle] > value) { + right = middle - 1; + middle = left + Math.floor((right - left) / 2); + } else { + left = middle + 1; + middle = left + Math.floor((right - left) / 2); + } + + // if found update output array and exit + if (searchList[middle] == value) { + arrayPath.push(searchList[middle]); + + break; + } + } + return arrayPath; +}; +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md new file mode 100644 index 00000000000..12d385f3107 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md @@ -0,0 +1,109 @@ +--- +id: 62a257659d0d1e2456f24ba2 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`. + +# --hints-- + +You should not have a `console.log("Hello World");` line in your code. + +```js +assert.notMatch(code, /console\.log\("Hello World"\);/); +``` + +Your `script` element should have a `src` attribute set to `./script.js`. + +```js +const script = document.querySelector("script[data-src$='script.js']"); +assert.exists(script); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md new file mode 100644 index 00000000000..af7153531cf --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md @@ -0,0 +1,102 @@ +--- +id: 62a39f5a5790eb27c1e5d4bf +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your view has been switched to your new `script.js` file. Remember that you can use the tabs above to switch between files. + +Add your `console.log("Hello World");` line to this file, and see it appear in your console. + +# --hints-- + +You should have a `console.log("Hello World");` line in your code. + +```js +assert.match(code, /console\.log\("Hello World"\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md new file mode 100644 index 00000000000..b40d5f4cc30 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md @@ -0,0 +1,132 @@ +--- +id: 62a3a0a3c0a4b32915d26a6e +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Remove your `console.log("Hello World");` line to begin writing your project code. + +In JavaScript, a variable is used to hold a value. To use a variable, you must first declare it. For example, to declare a variable called `camperbot`, you would write: + +```js +var camperbot; +``` + +The `var` keyword tells JavaScript you are declaring a variable. Declare a variable called `xp`. + +# --hints-- + +You should not have a `console.log("Hello World");` line in your code. + +```js +assert.notMatch(code, /console\.log\("Hello World"\);/); +``` + +You should use the `var` keyword to declare your variable. + +```js +assert.match(code, /var/); +``` + +You should declare a variable named `xp`. + +```js +assert.match(code, /xp/); +``` + +You should not assign a value to your variable. + +```js +assert.notMatch(code, /var xp =/); +``` + +Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /var xp;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +console.log("Hello World"); +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md new file mode 100644 index 00000000000..7fb32406762 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md @@ -0,0 +1,112 @@ +--- +id: 62a3a488b24fb32b91155d56 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Variables can be assigned a value. When you do this while you declare it, this is called initialization. For example: + +```js +var camperbot = "Bot"; +``` + +This would initialize the `camperbot` variable with a value of `Bot`. Initialize your `xp` variable to have a value of `0`. + +# --hints-- + +`xp` should have a value of `0`. + +```js +assert.equal(xp, 0); +``` + +You should initialize the `xp` variable to `0`. Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /var\s+xp\s*=\s*0\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md new file mode 100644 index 00000000000..278aa0789fc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md @@ -0,0 +1,136 @@ +--- +id: 62a3a75d8466a12e009eff76 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Initialize another variable called `health` with a value of `100`, and a variable called `gold` with a value of `50`. + +# --hints-- + +You should use `var` to declare a variable called `health`. + +```js +assert.match(code, /var health/); +``` + +You should initialize a variable called `health` with a value of `100`. + +```js +assert.match(code, /var health\s?=\s?100/); +``` + +You should use `var` to declare a variable called `gold`. + +```js +assert.match(code, /var gold/); +``` + +You should initialize a variable called `gold` with a value of `50`. + +```js +assert.match(code, /var gold\s?=\s?50/); +``` + +`health` should have a value of `100`. + +```js +assert.equal(health, 100); +``` + +`gold` should have a value of `50`. + +```js +assert.equal(gold, 50); +``` + +`xp` should still have a value of `0`. + +```js +assert.equal(xp, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md new file mode 100644 index 00000000000..606fdeb799a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md @@ -0,0 +1,122 @@ +--- +id: 62a3a7e4f1060e2fc5ffb34b +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create another variable called `currentWeapon` and set it to 0. + +When a variable name has multiple words, the convention in JavaScript is to use what's called camelCase. The first word is lowercase, and the first letter of every following word is uppercase. + +# --hints-- + +You should use `var` to declare a variable called `currentWeapon`. + +```js +assert.match(code, /var currentweapon/i); +``` + +You should use camelCase to name your variable. + +```js +assert.match(code, /currentWeapon/); +``` + +Your `currentWeapon` variable should be set to `0`. + +```js +assert.equal(currentWeapon, 0); +``` + +You should initialize your variable to `0`. + +```js +assert.match(code, /var currentWeapon\s?=\s?0/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +var health = 100; +var gold = 50; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md new file mode 100644 index 00000000000..63ecefac153 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md @@ -0,0 +1,138 @@ +--- +id: 62a3b365f1cdeb33efc2502e +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. + +Change all of your `var` keywords to `let`. + +# --hints-- + +You should not have any `var` keywords in your code. + +```js +assert.notMatch(code, /var/); +``` + +You should use the `let` keyword to declare your `xp` variable. + +```js +assert.match(code, /let xp/); +``` + +You should use the `let` keyword to declare your `health` variable. + +```js +assert.match(code, /let health/); +``` + +You should use the `let` keyword to declare your `gold` variable. + +```js +assert.match(code, /let gold/); +``` + +You should use the `let` keyword to declare your `currentWeapon` variable. + +```js +assert.match(code, /let currentWeapon/); +``` + +You should not change the values of your variables. + +```js +assert.equal(xp, 0); +assert.equal(health, 100); +assert.equal(gold, 50); +assert.equal(currentWeapon, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +var health = 100; +var gold = 50; +var currentWeapon = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md new file mode 100644 index 00000000000..f4a27916dea --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md @@ -0,0 +1,115 @@ +--- +id: 62a3b3eab50e193608c19fc6 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Using the `let` keyword, declare a variable called `fighting` but do not initialize it with a value. Remember to end your line with a semi-colon. + +# --hints-- + +You should use `let` to declare a variable `fighting`. + +```js +assert.match(code, /let fighting/); +``` + +Your `fighting` variable should not have a value. + +```js +assert.isUndefined(fighting); +``` + +You should not assign a value to your `fighting` variable. Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /let fighting;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md new file mode 100644 index 00000000000..c679c2cb1fe --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md @@ -0,0 +1,140 @@ +--- +id: 62a3b41c9494f937560640ab +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Declare two more variables named `monsterHealth` and `inventory`, but do not initialize them. + +# --hints-- + +You should use `let` to declare your `monsterHealth` variable. + +```js +assert.match(code, /let monsterHealth/i); +``` + +You should use camelCase to name your `monsterHealth` variable. + +```js +assert.match(code, /monsterHealth/); +``` + +`monsterHealth` should not have a value. + +```js +assert.isUndefined(monsterHealth); +``` + +You should not assign a value to your `monsterHealth` variable. Remember your semi-colon. + +```js +assert.match(code, /let monsterHealth;/); +``` + +You should use `let` to declare your `inventory` variable. + +```js +assert.match(code, /let inventory/i); +``` + +`inventory` should not have a value. + +```js +assert.isUndefined(inventory); +``` + +You should not assign a value to your `inventory` variable. Remember your semi-colon. + +```js +assert.match(code, /let inventory;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md new file mode 100644 index 00000000000..878b7879e25 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md @@ -0,0 +1,118 @@ +--- +id: 62a3b49686792938718b90d3 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The variables you have assigned have all had values that are numbers. JavaScript has multiple different data types. The next one you will use is the string. Strings are used to store things like words or text. Strings are surrounded with double quotes, single quotes, or backticks. Here is an example of declaring a variable with a string: + +```js +let developer = "Naomi"; +``` + +Assign the `inventory` variable to have the value of `stick`. + +# --hints-- + +You should set `inventory` to the string `stick`. + +```js +assert.equal(inventory, "stick"); +``` + +You should initialize your `inventory` variable with the string `stick`. + +```js +assert.match(code, /let\s+inventory\s*=\s*('|"|`)stick\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md new file mode 100644 index 00000000000..bb8a09862a3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md @@ -0,0 +1,142 @@ +--- +id: 62a3b506dbaead396f58a701 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The player's inventory in your game will be able to hold multiple items. You will need to use a data type that can do this. An array can be used to hold multiple values. For example: + +```js +let order = ["first", "second", "third"]; +``` + +This is an array which holds three values. Notice how the values are separated by commas. Change your `inventory` variable to be an array with the strings `stick`, `dagger`, and `sword`. + +# --hints-- + +Your `inventory` variable should be an array. + +```js +assert.isArray(inventory); +``` + +Your `inventory` variable should have three values. + +```js +assert.lengthOf(inventory, 3); +``` + +Your `inventory` variable should include the string `stick`. + +```js +assert.include(inventory, "stick"); +``` + +Your `inventory` variable should include the string `dagger`. + +```js +assert.include(inventory, "dagger"); +``` + +Your `inventory` variable should include the string `sword`. + +```js +assert.include(inventory, "sword"); +``` + +Your `inventory` variable should have the values in the correct order. + +```js +assert.deepEqual(inventory, ["stick", "dagger", "sword"]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = "stick"; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md new file mode 100644 index 00000000000..f7a00ecb775 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md @@ -0,0 +1,118 @@ +--- +id: 62a3b5843544ce3a77459c27 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +For now, you want the player to start with just the `stick`. Change the `inventory` array to have `stick` as its only value. + +# --hints-- + +Your `inventory` variable should still be an array. + +```js +assert.isArray(inventory); +``` + +Your `inventory` variable should only have one value. + +```js +assert.lengthOf(inventory, 1); +``` + +Your `inventory` variable should include the string `stick`. + +```js +assert.include(inventory, "stick"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick", "dagger", "sword"]; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md new file mode 100644 index 00000000000..af9e9e6bf70 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md @@ -0,0 +1,128 @@ +--- +id: 62a3b79d520a7f3d0e25afd6 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +JavaScript interacts with the HTML using the Document Object Model, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the `document` variable, which represents your entire HTML document. + +One method for finding specific elements in your HTML is using the `querySelector()` method. The `querySelector()` method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the `

` element in your HTML, you would write: + +```js +let h1 = document.querySelector("h1"); +``` + +Note that `h1` is a string and matches the CSS selector you would use. Create a `button1` variable and use `querySelector()` to assign it your element with the `id` of `button1`. Remember that CSS `id` selectors are prefixed with a `#`. + +# --hints-- + +You should use `let` to declare a `button1` variable. + +```js +assert.match(code, /let button1/); +``` + +You should use `document.querySelector()`. + +```js +assert.match(code, /document\.querySelector/); +``` + +You should use the `#button1` selector. + +```js +assert.match(code, /querySelector\(('|")#button1\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md new file mode 100644 index 00000000000..0e0eaee9ae7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md @@ -0,0 +1,116 @@ +--- +id: 62a3bb9aeefe4b3fc43c6d7b +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +`button1` is a variable that is not going to be reassigned. If you are not going to assign a new value to a variable, it is best practice to use the `const` keyword to declare it instead of the `let` keyword. This will tell JavaScript to throw an error if you accidentally reassign it. + +Change your `button1` variable to be declared with the `const` keyword. + +# --hints-- + +Your `button1` variable should be declared with `const`. + +```js +assert.match(code, /const button1/); +``` + +Your `button1` variable should still have the value of your `#button1` element. + +```js +assert.deepEqual(button1, document.querySelector("#button1")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +let button1 = document.querySelector("#button1"); +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md new file mode 100644 index 00000000000..065f7587076 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md @@ -0,0 +1,181 @@ +--- +id: 62a3bec30ea7f941412512dc +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Just like you did with the buttons, create variables for the following `id`s and use `querySelector()` to give them the element as a value: + +`text`, `xpText`, `healthText`, `goldText`, `monsterStats`, and `monsterName`. + +Remember to declare these with the `const` keyword, and name the variables to match the `id`s. + +# --hints-- + +You should declare a `text` variable with `const`. + +```js +assert.match(code, /const text/); +``` + +Your `text` variable should have the value of your `#text` element. + +```js +assert.deepEqual(text, document.querySelector('#text')); +``` + +You should declare a `xpText` variable with `const`. + +```js +assert.match(code, /const xpText/); +``` + +Your `xpText` variable should have the value of your `#xpText` element. + +```js +assert.deepEqual(xpText, document.querySelector('#xpText')); +``` + +You should declare a `healthText` variable with `const`. + +```js +assert.match(code, /const healthText/); +``` + +Your `healthText` variable should have the value of your `#healthText` element. + +```js +assert.deepEqual(healthText, document.querySelector('#healthText')); +``` + +You should declare a `goldText` variable with `const`. + +```js +assert.match(code, /const goldText/); +``` + +Your `goldText` variable should have the value of your `#goldText` element. + +```js +assert.deepEqual(goldText, document.querySelector('#goldText')); +``` + +You should declare a `monsterStats` variable with `const`. + +```js +assert.match(code, /const monsterStats/); +``` + +Your `monsterStats` variable should have the value of your `#monsterStats` element. + +```js +assert.deepEqual(monsterStats, document.querySelector('#monsterStats')); +``` + +You should declare a `monsterName` variable with `const`. + +```js +assert.match(code, /const monsterName/); +``` + +Your `monsterName` variable should have the value of your `#monsterName` element. + +```js +assert.deepEqual(monsterName, document.querySelector('#monsterName')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md new file mode 100644 index 00000000000..ed392fd2cc4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md @@ -0,0 +1,134 @@ +--- +id: 62a3c0ab883fd9435cd5c518 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Comments allow you to add notes to your code. In JavaScript, single-line comments can be written with `//` and multi-line comments can be written with `/*` and `*/`. For example, here are single and multi-line comments that say "Hello World": + +```js +// hello world +/* + hello world +*/ +``` + +Add a single-line comment that says `initialize buttons`. + +# --hints-- + +You should use the `//` symbol to start a single-line comment. + +```js +assert.match(code, /\/\//); +``` + +Your comment should have the text `initialize buttons`. + +```js +assert.match(code, /\/\/\s*initialize buttons/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md new file mode 100644 index 00000000000..0f2fe813e63 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md @@ -0,0 +1,134 @@ +--- +id: 62a3c2fccf186146b59c6e96 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +`button1` represents your first `button` element. These elements have a special property called `onclick`, which you can use to determine what happens when someone clicks that button. Properties in JavaScript can be accessed in a couple of ways - the first is with dot notation. Accessing the `onclick` property of a button would look like `button.onclick`. + +Use dot notation to set the `onclick` property of your `button1` to the variable `goStore`. This variable will be something you write later. Note that `button1` is already declared, so you do not need to use `let` or `const`. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button1`. + +```js +assert.match(code, /button1\.onclick/); +``` + +You should not use `let` or `const`. + +```js +assert.notMatch(code, /(let|const)\s+button1\.onclick/); +``` + +You should set the `onclick` property of `button1` to the variable `goStore`. + +```js +assert.match(code, /button1\.onclick\s*=\s*goStore/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- +// initialize buttons + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md new file mode 100644 index 00000000000..73d0dc234d9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md @@ -0,0 +1,151 @@ +--- +id: 62a3c4a0e52767482c5202d4 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Using the same syntax, set the `onclick` properties of `button2` and `button3` to `goCave` and `fightDragon` respectively. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button2`. + +```js +assert.match(code, /button2\.onclick/); +``` + +You should not use `let` or `const` to assign `button2.onclick`. + +```js +assert.notMatch(code, /(let|const)\s+button2\.onclick/); +``` + +You should set the `onclick` property of `button2` to the variable `goCave`. + +```js +assert.match(code, /button2\.onclick\s*=\s*goCave/); +``` + +You should use dot notation to access the `onclick` property of `button3`. + +```js +assert.match(code, /button3\.onclick/); +``` + +You should not use `let` or `const` to assign `button3.onclick`. + +```js +assert.notMatch(code, /(let|const)\s+button3\.onclick/); +``` + +You should set the `onclick` property of `button3` to the variable `fightDragon`. + +```js +assert.match(code, /button3\.onclick\s*=\s*fightDragon/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- +// initialize buttons +button1.onclick = goStore; + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md new file mode 100644 index 00000000000..38a51618160 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md @@ -0,0 +1,150 @@ +--- +id: 62a3c668afc43b4a134cca81 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Functions are special tools that allow you to run sections of code at specific times. You can declare functions using the `function` keyword. Here is an example of a function called `functionName` - note the opening and closing curly braces. These indicate the section of code that is within the function. + +```js +function functionName() { + +} +``` + +Create an empty function named `goStore`. This will match the `goStore` variable you used earlier. + +# --hints-- + +You should declare `goStore` with the `function` keyword. + +```js +assert.match(code, /function\s*goStore()/); +``` + +`goStore` should be defined. + +```js +assert.isDefined(goStore); +``` + +`goStore` should be a function. + +```js +assert.isFunction(goStore); +``` + +`goStore` should be an empty function. + +```js +assert.equal(goStore.toString(), "function goStore() {}"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md new file mode 100644 index 00000000000..7bec654ec15 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md @@ -0,0 +1,138 @@ +--- +id: 62a3c8bf3980c14c438d2aed +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message "Hello World". + +```js +function functionName() { + console.log("Hello World"); +} +``` + +# --hints-- + +You should have a `console.log("Going to store.");` line in your code. Don't forget the semi-colon. + +```js +assert.match(code, /console\.log\(('|")Going to store\.\1\);/); +``` + +Your `console.log("Going to store.");` line should be in your `goStore` function. + +```js +assert.match(goStore.toString(), /console\.log\(('|")Going to store\.\1\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md new file mode 100644 index 00000000000..a911182a57c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md @@ -0,0 +1,146 @@ +--- +id: 62a3c91a2bab1b4d6fabb726 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Now create a `goCave` function that prints `Going to cave.` to the console. + +# --hints-- + +You should use the `function` keyword to declare `goCave`. + +```js +assert.match(code, /function goCave/); +``` + +`goCave` should be a function. + +```js +assert.isFunction(goCave); +``` + +You should have a `console.log("Going to cave.");` line in your code. + +```js +assert.match(code, /console.log\(('|")Going to cave\.\1\)/); +``` + +Your `console.log("Going to cave.");` line should be inside your `goCave` function. + +```js +assert.match(goCave.toString(), /console.log\(('|")Going to cave\.\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + console.log("Going to store."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md new file mode 100644 index 00000000000..c14f5a7d858 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md @@ -0,0 +1,152 @@ +--- +id: 62a3cdb11478a34ff4a6470d +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Now create a `fightDragon` function that prints `Fighting dragon.` to the console. + +Once you have done that, open your console and try clicking the buttons on your project. + +# --hints-- + +You should use the `function` keyword to declare `fightDragon`. + +```js +assert.match(code, /function fightDragon/); +``` + +`fightDragon` should be a function. + +```js +assert.isFunction(fightDragon); +``` + +You should have a `console.log("Fighting dragon.");` line in your code. + +```js +assert.match(code, /console.log\(('|")Fighting dragon\.\1\)/); +``` + +Your `console.log("Fighting dragon.");` line should be inside your `fightDragon` function. + +```js +assert.match(fightDragon.toString(), /console.log\(('|")Fighting dragon\.\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + console.log("Going to store."); +} + +function goCave() { + console.log("Going to cave."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md new file mode 100644 index 00000000000..490ea3e8e2f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md @@ -0,0 +1,164 @@ +--- +id: 62a3cfc8328d3351b95d4f61 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +The `innerText` property controls the text that appears in an HTML element. For example: + +```js +const info = document.querySelector("#info"); +info.innerText = "Hello World"; +``` + +This code would change the element assigned to the `div` variable to have the text `Hello World`. + +When a player clicks your `Go to store` button, you want to change the buttons and text. Remove the code inside the `goStore` function and add a line that updates the text of `button1` to say `Buy 10 health (10 gold)`. + +# --hints-- + +You should not have a `console.log("Going to store.");` line in your code. + +```js +assert.notMatch(code, /console.log\(('|")Going to store\.\1\)/); +``` + +You should use dot notation to access the `innerText` property of `button1`. + +```js +assert.match(code, /button1\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button1`. + +```js +assert.notMatch(code, /(let|const)\s+button1.innerText/); +``` + +You should update the `innerText` property of `button1` to be `Buy 10 health (10 gold)`. + +```js +assert.match(code, /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + border: 1px solid black; + padding: 5px; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + console.log("Going to store."); +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md new file mode 100644 index 00000000000..8d5c8d1245f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md @@ -0,0 +1,176 @@ +--- +id: 62a7beb1ad61211ac153707f +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now add a line that updates the text of `button2` to say `Buy weapon (30 gold)` and update the text of `button3` to say `Go to town square`. + +# --hints-- + +You should use dot notation to access the `innerText` property of `button2`. + +```js +assert.match(code, /button2\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button2`. + +```js +assert.notMatch(code, /(let|const)\s+button2.innerText/); +``` + +You should update the `innerText` property of `button2` to be `Buy weapon (30 gold)`. + +```js +assert.match(code, /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/); +``` + +You should use dot notation to access the `innerText` property of `button3`. + +```js +assert.match(code, /button3\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button3`. + +```js +assert.notMatch(code, /(let|const)\s+button3.innerText/); +``` + +You should update the `innerText` property of `button3` to be `Go to town square`. + +```js +assert.match(code, /button3\.innerText\s*=\s*('|")Go to town square\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button3\.innerText\s*=\s*('|")Go to town square\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md new file mode 100644 index 00000000000..981e39344f7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md @@ -0,0 +1,202 @@ +--- +id: 62a7bf06d2ad9d1c5024e833 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +You will also need to update the functions that run when the buttons are clicked. Update the `onclick` property for each button to run `buyHealth`, `buyWeapon`, and `goTown`, respectively. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button1`. + +```js +assert.match(code, /button1\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button1`. + +```js +assert.notMatch(code, /(let|const)\s+button1.onclick/); +``` + +You should set the `onclick` property of `button1` to be `buyHealth`. + +```js +assert.match(code, /button1\.onclick\s*=\s*buyHealth/); +``` + +You should set the `onclick` property of `button1` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button1\.onclick\s*=\s*buyHealth/); +``` + +You should use dot notation to access the `onclick` property of `button2`. + +```js +assert.match(code, /button2\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button2`. + +```js +assert.notMatch(code, /(let|const)\s+button2.onclick/); +``` + +You should set the `onclick` property of `button2` to be `buyWeapon`. + +```js +assert.match(code, /button2\.onclick\s*=\s*buyWeapon/); +``` + +You should set the `onclick` property of `button2` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button2\.onclick\s*=\s*buyWeapon/); +``` + +You should use dot notation to access the `onclick` property of `button3`. + +```js +assert.match(code, /button3\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button3`. + +```js +assert.notMatch(code, /(let|const)\s+button3.onclick/); +``` + +You should set the `onclick` property of `button3` to be `goTown`. + +```js +assert.match(code, /button3\.onclick\s*=\s*goTown/); +``` + +You should set the `onclick` property of `button3` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button3\.onclick\s*=\s*goTown/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md new file mode 100644 index 00000000000..eed48a208c4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -0,0 +1,157 @@ +--- +id: 62a7bfabe119461eb13ccbd6 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Now you need to modify your display text. Change the `innerText` of the `text` to be `You enter the store.`. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text`. + +```js +assert.match(code, /text\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `text`. + +```js +assert.notMatch(code, /(let|const)\s+text.innerText/); +``` + +You should update the `innerText` property of `text` to be `You enter the store.`. + +```js +assert.match(code, /text\.innerText\s*=\s*('|")You enter the store.\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /text\.innerText\s*=\s*('|")You enter the store.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md new file mode 100644 index 00000000000..ae7d6df92f7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md @@ -0,0 +1,172 @@ +--- +id: 62a7bfd9179b7f1f6a15fb1e +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Create three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`. + +# --hints-- + +You should declare `buyHealth` with the `function` keyword. + +```js +assert.match(code, /function buyHealth/); +``` + +You should declare `buyWeapon` with the `function` keyword. + +```js +assert.match(code, /function buyWeapon/); +``` + +You should declare `goTown` with the `function` keyword. + +```js +assert.match(code, /function goTown/); +``` + +`buyHealth` should be an empty function. + +```js +assert.equal(buyHealth.toString(), 'function buyHealth() {}'); +``` + +`buyWeapon` should be an empty function. + +```js +assert.equal(buyWeapon.toString(), 'function buyWeapon() {}'); +``` + +`goTown` should be an empty function. + +```js +assert.equal(goTown.toString(), 'function goTown() {}'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md new file mode 100644 index 00000000000..b985f7eded3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md @@ -0,0 +1,162 @@ +--- +id: 62a7c011eef9fb2084b966db +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move your `goTown` function above your `goStore` function. Then copy and paste the contents of the `goStore` function into the `goTown` function. + +# --hints-- + +Your `goTown` function should come before your `goStore` function. + +```js +const goTown = code.split(" ").indexOf("goTown()"); +const goStore = code.split(" ").indexOf("goStore()"); +assert.isBelow(goTown, goStore); +``` + +Your `goTown` function should have the same contents as your `goStore` function. + +```js +const goTownString = goTown.toString().replace("goTown", ""); +const goStoreString = goStore.toString().replace("goStore", ""); +assert.equal(goTownString, goStoreString); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function goTown() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md new file mode 100644 index 00000000000..20ac473611a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md @@ -0,0 +1,194 @@ +--- +id: 62a7c071219da921758a35bb +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +In your `goTown` function, update your button `innerText` properties to be `Go to store`, `Go to cave`, and `Fight dragon`. Update your `onclick` properties to be `goStore`, `goCave`, and `fightDragon`, respectively. Finally, update your text's `innerText` property to be `You are in the town square. You see a sign that says Store.`. + +# --hints-- + +You should set the `button1.innerText` property to be `Go to store` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/); +``` + +You should set the `button2.innerText` property to be `Go to cave` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/); +``` + +You should set the `button3.innerText` property to be `Fight dragon` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/); +``` + +You should set the `button1.onclick` property to be `goStore` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button1\.onclick\s*=\s*goStore/); +``` + +You should set the `button2.onclick` property to be `goCave` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button2\.onclick\s*=\s*goCave/); +``` + +You should set the `button3.onclick` property to be `fightDragon` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button3\.onclick\s*=\s*fightDragon/); +``` + +You should set the `text.innerText` property to be `You are in the town square. You see a sign that says Store.` in your `goTown` function. + +```js +assert.match(goTown.toString(), /text\.innerText\s*=\s*('|")You are in the town square. You see a sign that says Store\.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goTown() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md new file mode 100644 index 00000000000..6b26d69619b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md @@ -0,0 +1,164 @@ +--- +id: 62a7c23e6b511f22ed71197a +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You need to wrap the text `Store` in double quotes. Because your string is already wrapped in double quotes, you'll need to escape the quotes around `Store`. You can escape them with a backslash `\`. Here is an example: + +```js +const escapedString = "Naomi likes to play \"Zelda\" sometimes."; +``` + +Wrap the text `Store` in double quotes within your `text.innerText` line. + +# --hints-- + +You should wrap the text `Store` in double quotes. + +```js +assert.match(goTown.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"."/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says Store."; +} +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md new file mode 100644 index 00000000000..82ae722f3d8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md @@ -0,0 +1,180 @@ +--- +id: 62a7cc99577fbf25ee7a7d76 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +You have repetition in the `goTown` and `goStore` functions. When you have repetition in your code, this is a sign that you need another function. Functions can take parameters, which are values that are given to the function each time it is run. Here is a function that takes a parameter called `param`: + +```js +function myFunction(param) { + console.log(param); +} +``` + +Create an empty `update` function that takes a parameter called `location`. + +# --hints-- + +You should use the `function` keyword to declare `update`. + +```js +assert.match(code, /function\s+update/); +``` + +Your `update` function should take a parameter called `location`. + +```js +assert.match(update.toString(), /update\(location\)/); +``` + +Your `update` function should be empty. + +```js +assert.equal(update.toString(), function update(location) {}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- + +--fcc-editable-region-- + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md new file mode 100644 index 00000000000..a36f9b9f86e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md @@ -0,0 +1,176 @@ +--- +id: 62a8a929e4260d08093756d2 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Create a variable called `locations` and set it to an empty array. + +# --hints-- + +You should use `const` to declare `locations`. + +```js +assert.match(code, /const locations/); +``` + +`locations` should be an array. + + +```js +assert.isArray(locations); +``` + +`locations` should be empty. + +```js +assert.equal(locations.length, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- + +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md new file mode 100644 index 00000000000..4f9143c205b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md @@ -0,0 +1,171 @@ +--- +id: 62a8a9d876b2580943ba9351 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You previously used an array to store strings. But arrays can store any data type. This time, your array will be storing objects. Objects are similar to arrays, but with a few differences. One difference is that objects use properties, or keys, to access and modify data. + +Objects are indicated by curly braces. An empty object would look like `{}`. Add an empty object to your `locations` array. + +# --hints-- + +Your first value of `locations` should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first value of `locations` should be an empty object. + +```js +assert.deepEqual(locations[0], {}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = []; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md new file mode 100644 index 00000000000..d5c3664e5ed --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md @@ -0,0 +1,187 @@ +--- +id: 62a8aa98a8289d0a698eee1d +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Object properties are written as `key: value` pairs, where `key` is the name of the property (or the key), and `value` is the value that property holds. For example, here is an object with a key of `name` set to `Quincy Larson`. + +```js +{ + name: "Quincy Larson" +} +``` + +Add a `name` property to your empty object and give it a value of `town square`. + +# --hints-- + +Your first value of `locations` should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first value of `locations` should have a `name` property. + +```js +assert.isDefined(locations[0].name); +``` + +Your first value of `locations` should have a `name` property with a value of `town square`. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md new file mode 100644 index 00000000000..45578691077 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md @@ -0,0 +1,200 @@ +--- +id: 62a8ab0e27cbaf0b54ba8a42 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Just like array values, object properties are separated by a comma. Add a comma after your `name` property and add a `button text` property with the value of an empty array. Note that because the property name has more than one word, you'll need to surround it in quotes. + +For example: + +```js +{ + name: "Naomi", + "favorite color": "purple" +} +``` + +# --hints-- + +Your first `locations` value should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first `locations` value should have a `button text` property. + +```js +assert.isDefined(locations[0]["button text"]); +``` + +Your first `locations` value should have a `button text` property with a value that is an array. + +```js +assert.isArray(locations[0]["button text"]); +``` + +Your first `locations` value should have a `button text` property with a value that is an empty array. + +```js +assert.equal(locations[0]["button text"].length, 0); +``` + +You should not remove or change the `name` property. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square" + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md new file mode 100644 index 00000000000..5a1412cf312 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md @@ -0,0 +1,194 @@ +--- +id: 62a8ac194679e60cb561b0a8 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give your empty `button text` array three string elements. Use the three strings being assigned to the button `innerText` properties in the `goTown` function. Remember that array values are separated by commas. + +# --hints-- + +Your `button text` array should have three elements. + +```js +assert.lengthOf(locations[0]["button text"], 3); +``` + +Your `button text` array should have three strings. + +```js +assert.isString(locations[0]["button text"][0]); +assert.isString(locations[0]["button text"][1]); +assert.isString(locations[0]["button text"][2]); +``` + +The first value in the `button text` array should be "Go to store". + +```js +assert.equal(locations[0]["button text"][0], "Go to store"); +``` + +The second value in the `button text` array should be "Go to cave". + +```js +assert.equal(locations[0]["button text"][1], "Go to cave"); +``` + +The third value in the `button text` array should be "Fight dragon". + +```js +assert.equal(locations[0]["button text"][2], "Fight dragon"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": [] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md new file mode 100644 index 00000000000..1229366bb3a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md @@ -0,0 +1,198 @@ +--- +id: 62a8ad8e01d7cb0deae5ec66 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Create another property in your object called `button functions`. Give this property an array containing the three functions assigned to the `onclick` properties in the `goTown` function. Remember that these functions are variables, not strings, and should not be wrapped in quotes. + +# --hints-- + +Your first `locations` object should have a `button functions` property. + +```js +assert.isDefined(locations[0]["button functions"]); +``` + +Your `button functions` property should be an array. + +```js +assert.isArray(locations[0]["button functions"]); +``` + +Your `button functions` property should have three values in it. + +```js +assert.lengthOf(locations[0]["button functions"], 3); +``` + +Your first `button functions` array value should be the function `goStore`. + +```js +assert.equal(locations[0]["button functions"][0], goStore); +``` + +Your second `button functions` array value should be the function `goCave`. + +```js +assert.equal(locations[0]["button functions"][1], goCave); +``` + +Your third `button functions` array value should be the function `fightDragon`. + +```js +assert.equal(locations[0]["button functions"][2], fightDragon); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md new file mode 100644 index 00000000000..7ac20d72a3e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md @@ -0,0 +1,181 @@ +--- +id: 62a8ade9b2f5b30ef0b606c2 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Add one final property to the object named `text`. Give this property the final `text.innerText` value from the `goTown` function. + +# --hints-- + +Your first `locations` value should have a `text` property. + +```js +assert.isDefined(locations[0]["text"]); +``` + +Your `text` property should be a string. + +```js +assert.isString(locations[0]["text"]); +``` + +Your `text` property should have the value `You are in the town square. You see a sign that says \"Store\".` + +```js +assert.equal(locations[0]["text"], "You are in the town square. You see a sign that says \"Store\"."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md new file mode 100644 index 00000000000..79d6d140e1e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md @@ -0,0 +1,235 @@ +--- +id: 62a8ae85fcaedc0fddc7ca4f +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Add a second object to your `locations` array (remember to separate them with a comma). Following the pattern you used in the first object, create the same properties but use the values from the `goStore` function. Set the `name` property to `store`. + +# --hints-- + +Your `locations` array should have two values. + +```js +assert.lengthOf(locations, 2); +``` + +Both `locations` values should be objects. + + +```js +assert.isObject(locations[0]); +assert.isObject(locations[1]); +``` + +Your second `locations` object should have a `name` property with the value of `store`. + +```js +assert.equal(locations[1].name, "store"); +``` + +Your second `locations` object should have a `button text` property which is an array. + +```js +assert.isArray(locations[1]["button text"]); +``` + +Your `button text` property should have the string values `Buy 10 health (10 gold)`, `Buy weapon (30 gold)`, and `Go to town square`. + +```js +assert.equal(locations[1]["button text"][0], "Buy 10 health (10 gold)"); +assert.equal(locations[1]["button text"][1], "Buy weapon (30 gold)"); +assert.equal(locations[1]["button text"][2], "Go to town square"); +``` + +Your second `locations` object should have a `button functions` property which is an array. + +```js +assert.isArray(locations[1]["button functions"]); +``` + +Your `button functions` property should have the function values `buyHealth`, `buyWeapon`, and `goTown`. + +```js +assert.equal(locations[1]["button functions"][0], buyHealth); +assert.equal(locations[1]["button functions"][1], buyWeapon); +assert.equal(locations[1]["button functions"][2], goTown); +``` + +Your second `locations` object should have a `text` property which is a string. + +```js +assert.isString(locations[1].text); +``` + +Your second `locations` object should have a `text` property with the value of `You enter the store.`. + +```js +assert.equal(locations[1].text, "You enter the store."); +``` + +You should not modify the first `locations` object. + +```js +assert.deepEqual(locations[0], { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." +}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md new file mode 100644 index 00000000000..c60cf5907da --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md @@ -0,0 +1,224 @@ +--- +id: 62a8b0b5053f16111b0b6b5f +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Now you can consolidate some of your code. Start by copying the code from inside the `goTown` function and paste it into your `update` function. Then, remove all the code from inside the `goTown` and `goStore` functions. + +# --hints-- + +Your `update` function should set `button1.innerText` to `Go to store`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/); +``` + +Your `update` function should set `button2.innerText` to `Go to cave`. + +```js +assert.match(update.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/); +``` + +Your `update` function should set `button3.innerText` to `Fight dragon`. + +```js +assert.match(update.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/); +``` + +Your `update` function should set `button1.onclick` to `goStore`. + +```js +assert.match(update.toString(), /button1\.onclick\s*=\s*goStore/); +``` + +Your `update` function should set `button2.onclick` to `goCave`. + +```js +assert.match(update.toString(), /button2\.onclick\s*=\s*goCave/); +``` + +Your `update` function should set `button3.onclick` to `fightDragon`. + +```js +assert.match(update.toString(), /button3\.onclick\s*=\s*fightDragon/); +``` + +Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says "Store".`. + +```js +assert.match(update.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"\."/); +``` + +Your `goTown` function should be empty. + +```js +assert.match(goTown.toString(), /function goTown\(\) \{\}/); +``` + +Your `goStore` function should be empty. + +```js +assert.match(goStore.toString(), /function goStore\(\) \{\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md new file mode 100644 index 00000000000..450bc66c133 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md @@ -0,0 +1,176 @@ +--- +id: 62a8b1762b7775124622e1a3 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Instead of assigning the `innerText` and `onclick` properties to specific strings and functions, the `update` function will use data from the `location` that is passed into it. First, that data needs to be passed. Inside the `goTown` function, call the `update` function. Here is an example of calling a function named `myFunction`: `myFunction();`. + +# --hints-- + +You should call the `update` function in the `goTown` function. + +```js +assert.match(goTown.toString(), /update\(\)/); +``` + +Don't forget your ending semi-colon. + +```js +assert.match(goTown.toString(), /update\(\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md new file mode 100644 index 00000000000..4d5aa1df9b9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md @@ -0,0 +1,170 @@ +--- +id: 62a8b3cc436db8139cc5fc09 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +You now need to pass the `location` argument into the `update` call. You pass arguments by including them within the parentheses of the function call. For example, calling `myFunction` with an `arg` argument would look like: `myFunction(arg)`. Pass your `locations` array into the `update` call. + +# --hints-- + +You should pass the `locations` array into the `update` call. + +```js +assert.match(goTown.toString(), /update\(locations\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md new file mode 100644 index 00000000000..a8bef26a706 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md @@ -0,0 +1,190 @@ +--- +id: 62a8b6536156c51500739b41 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +The `locations` array contains two locations: the town square and the store. Currently you are passing that entire array into the update functions. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. + +This is called bracket notation. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array. + +# --hints-- + +You should use bracket notation with `locations`. + +```js +assert.match(code, /locations\[/); +``` + +You should access the first object in the `locations` array. Remember that arrays are zero-based. + +```js +assert.match(code, /locations\[0\]/); +``` + +You should pass the first object in the `locations` array into the `update` function. + +```js +assert.match(code, /update\(locations\[0\]\);/); +``` + +This call should still be in your `goTown()` function. + +```js +assert.match(goTown.toString(), /update\(locations\[0\]\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(locations); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md new file mode 100644 index 00000000000..8a6a5c5c67a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md @@ -0,0 +1,176 @@ +--- +id: 62a8b711ab7a12161c7d9b67 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Now your `update` function needs to use the argument you pass into it. Inside the `update` function, change the `button1.innerText` assignment to be `location["button text"]`. That uses bracket notation to get the `button text` property of the `location` object passed into the function. + +# --hints-- + +Your `update` function should use bracket notation to get the `button text` property of the `location` object passed into the function. + +```js +assert.match(update.toString(), /location[('|")button text\1]/); +``` + +You should assign the value of the `button text` property of the `location` object to the `innerText` property of `button1`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md new file mode 100644 index 00000000000..ab4856b1c26 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md @@ -0,0 +1,176 @@ +--- +id: 62a8b9770050d217d2247801 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +`location["button text"]` is an array with three elements. Change the `button1.innerText` assignment to be the first element of that array instead. + +# --hints-- + +You should access the first element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[0\]/); +``` + +You should set the `button1.innerText` property to be the first element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]\[0\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md new file mode 100644 index 00000000000..458368c6e11 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md @@ -0,0 +1,188 @@ +--- +id: 62a8c0c8313e891a15ec23e7 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Now update `button2.innerText` and `button3.innerText` to be assigned the second and third values of the `button text` array, respectively. + +# --hints-- + +You should access the second element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[1\]/); +``` + +You should set the `button2.innerText` property to be the second element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button2\.innerText\s*=\s*location\[('|")button text\1\]\[1\]/); +``` + +You should access the third element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[2\]/); +``` + +You should set the `button3.innerText` property to be the third element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button3\.innerText\s*=\s*location\[('|")button text\1\]\[2\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md new file mode 100644 index 00000000000..4731c369e1e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md @@ -0,0 +1,200 @@ +--- +id: 62a8c1154d3ae11aee80353f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Following the same pattern as you did for the button text, update the three buttons' `onclick` assignments to be the first, second, and third values of the `button functions` array. + +# --hints-- + +You should access the first element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[0\]/); +``` + +You should set the `button1.onclick` property to be the second element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button1\.onclick\s*=\s*location\[('|")button functions\1\]\[0\]/); +``` + +You should access the second element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[1\]/); +``` + +You should set the `button2.onclick` property to be the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button2\.onclick\s*=\s*location\[('|")button functions\1\]\[1\]/); +``` + +You should access the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[2\]/); +``` + +You should set the `button3.onclick` property to be the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button3\.onclick\s*=\s*location\[('|")button functions\1\]\[2\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store.\""; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md new file mode 100644 index 00000000000..ca8a532ec15 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md @@ -0,0 +1,176 @@ +--- +id: 62a8c151b23bf21bc7c4fcba +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Finally, update the `text.innerText` assignment to equal the `text` from the location object. However, instead of using bracket notation, use dot notation. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`. + +# --hints-- + +You should use dot notation to access the `text` property of the `location` object. + +```js +assert.match(update.toString(), /location\.text/); +``` + +You should set the `text.innerText` property to be the `text` property of the `location` object. + +```js +assert.match(update.toString(), /text\.innerText\s*=\s*location\.text/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md new file mode 100644 index 00000000000..422ff092c3e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md @@ -0,0 +1,178 @@ +--- +id: 62a8c173949f851c83c64756 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Now update your `goStore` function to call the `update` function. Pass the second element of the `locations` array as your argument. + +To make sure your refactoring is correct, try clicking your first button again. You should see the same changes to your webpage that you saw earlier. + +# --hints-- + +Your `goStore` function should call the `update` function. + +```js +assert.match(goStore.toString(), /update\(/); +``` + +Your `goStore` function should pass the second element of the `locations` array as your argument to `update()`. + +```js +assert.match(goStore.toString(), /update\(locations\[1\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +--fcc-editable-region-- +function goStore() { + +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md new file mode 100644 index 00000000000..d7800eb4dce --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md @@ -0,0 +1,190 @@ +--- +id: 62a8c242b25a531f2909e5bc +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Create two more empty functions named `fightSlime` and `fightBeast`. These functions will be used in your upcoming `cave` object. + +# --hints-- + +`fightSlime` should be a function. + +```js +assert.isFunction(fightSlime); +``` + +`fightBeast` should be a function. + +```js +assert.isFunction(fightBeast); +``` + +`fightSlime` should be empty. + +```js +assert.match(fightSlime.toString(), /function fightSlime\(\) \{\}/); +``` + +`fightBeast` should be empty. + +```js +assert.match(fightBeast.toString(), /function fightBeast\(\) \{\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md new file mode 100644 index 00000000000..d96b10aaff6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md @@ -0,0 +1,234 @@ +--- +id: 62a8c2bbbd8aa82052f47c53 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Add a third object to the `locations` array. Give it the same properties as the other two objects. + +Set `name` to `cave`. Set `button text` to an array with the strings `Fight slime`, `Fight fanged beast`, and `Go to town square`. Set the `button functions` to an array with the variables `fightSlime`, `fightBeast`, and `goTown`. Set the `text` property to `You enter the cave. You see some monsters.`. + +# --hints-- + +You should have three values in your `locations` array. + +```js +console.log(locations); +assert.lengthOf(locations, 3); +``` + +Your third `locations` value should be an object. + +```js +assert.isObject(locations[2]); +``` + +Your third `locations` object should have a `name` property with the value of `cave`. + +```js +assert.equal(locations[2].name, "cave"); +``` + +Your third `locations` object should have a `button text` property which is an array. + +```js +assert.isArray(locations[2]["button text"]); +``` + +Your `button text` property should have the string values `Fight slime`, `Fight fanged beast`, and `Go to town square`. + +```js +assert.equal(locations[2]["button text"][0], "Fight slime"); +assert.equal(locations[2]["button text"][1], "Fight fanged beast"); +assert.equal(locations[2]["button text"][2], "Go to town square"); +``` + +Your third `locations` object should have a `button functions` property which is an array. + +```js +assert.isArray(locations[2]["button functions"]); +``` + +Your `button functions` property should have the function values `fightSlime`, `fightBeast`, and `goTown`. + +```js +assert.equal(locations[2]["button functions"][0], fightSlime); +assert.equal(locations[2]["button functions"][1], fightBeast); +assert.equal(locations[2]["button functions"][2], goTown); +``` + +Your third `locations` object should have a `text` property which is a string. + +```js +assert.isString(locations[2].text); +``` + +Your third `locations` object should have a `text` property with the value of `You enter the cave. You see some monsters.`. + +```js +assert.equal(locations[2].text, "You enter the cave. You see some monsters."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, +--fcc-editable-region-- + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md new file mode 100644 index 00000000000..1d663fa1670 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md @@ -0,0 +1,204 @@ +--- +id: 62a8c31ec0ec78216a1c36a0 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Now that you have a `cave` location object, update your `goCave` function to call `update` and pass that new `cave` location. Remember that this is the third element in your `locations` array. + +Don't forget to remove your `console.log` call! + +# --hints-- + +You should use bracket notation to access the third element in your `locations` array. + +```js +assert.match(code, /locations\[2\]/); +``` + +You should pass the third element in your `locations` array to `update`. + +```js +assert.match(code, /update\(locations\[2\]\)/); +``` + +You should call `update` with the third element in your `locations` array in your `goCave` function. + +```js +assert.match(goCave.toString(), /update\(locations\[2\]\)/); +``` + +You should not have the `console.log` statement in your `goCave` function. + +```js +assert.notMatch(goCave.toString(), /console\.log/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +--fcc-editable-region-- +function goCave() { + console.log("Going to cave."); +} +--fcc-editable-region-- + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md new file mode 100644 index 00000000000..4d33b655a6b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md @@ -0,0 +1,194 @@ +--- +id: 62a8c370ad8c68227137e0bc +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Now that your `store` and `cave` locations are complete, you can code the actions the player takes at those locations. Inside the `buyHealth` function, set `gold` equal to `gold` minus `10`. + +For example, here is how you would set `num` equal to `5` less than `num`: `num = num - 5;`. + +# --hints-- + +You should subtract `10` from `gold`. + +```js +assert.match(code, /gold\s*=\s*gold\s*-\s*10/); +``` + +Your `buyHealth` function should reduce `gold` by `10`. + +```js +gold = 10; +buyHealth(); +assert.equal(gold, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md new file mode 100644 index 00000000000..df1d38ffce5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md @@ -0,0 +1,192 @@ +--- +id: 62a8c3ebc6c35e23785e1a19 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +After the `gold` is updated, add a line to set `health` equal to `health` plus `10`. + +# --hints-- + +You should add `10` to `health`. + +```js +assert.match(code, /health\s*=\s*health\s*\+\s*10/); +``` + +Your `buyHealth` function should increase `health` by `10`. + +```js +health = 10; +buyHealth(); +assert.equal(health, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold = gold - 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md new file mode 100644 index 00000000000..a5bb57d211c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md @@ -0,0 +1,203 @@ +--- +id: 62a8c41ecaf1bd24536129b8 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +There is a shorthand way to add or subtract from a variable called compound assignment. For example, changing `num = num + 5` to compound assignment would look like `num += 5`. + +Update both lines inside your `buyHealth` function to use compound assignment. + +# --hints-- + +You should change `gold` to use compound assignment. + +```js +assert.notMatch(code, /gold\s*=\s*gold\s*-\s*10/); +``` + +You should change `health` to use compound assignment. + +```js +assert.notMatch(code, /health\s*=\s*health\s*\+\s*10/); +``` + +Your `buyHealth` function should still update the values. + +```js +gold = 10; +health = 10; +buyHealth(); +assert.equal(gold, 0); +assert.equal(health, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold = gold - 10; + health = health + 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md new file mode 100644 index 00000000000..70e928a9bd6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md @@ -0,0 +1,207 @@ +--- +id: 62a8c465fa7b0c252f4a8f0c +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Now that you are updating the `gold` and `health` variables, you need to display those new values on the game screen. After your assignment lines, assign the `innerText` property of `goldText` to be the variable `gold`. Use the same pattern to update `healthText` with the `health` variable. + +Here is an example: + +```js +let value = 100; +const total = document.querySelector('#total'); +total.innerText = value; +``` + +You can test this by clicking your "Go to store" button, followed by your "Buy Health" button. + +# --hints-- + +Your `buyHealth` function should update the text of `healthText` to be the value of `health`. + +```js +health = 10; +buyHealth(); +const target = document.querySelector('#healthText'); +assert.equal(target.innerText, '20'); +``` + +Your `buyHealth` function should update the text of `goldText` to be the value of `gold`. + +```js +gold = 10; +buyHealth(); +const target = document.querySelector('#goldText'); +assert.equal(target.innerText, '0'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold -= 10; + health += 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md new file mode 100644 index 00000000000..89161b6c20f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md @@ -0,0 +1,209 @@ +--- +id: 62a8c4db0710f3260f867a92 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +What if the player doesn't have enough gold to buy health? When you want to run code conditionally, you can use the `if` statement. Put all of the code in your `buyHealth` function inside an `if` statement. For example: + +```js +function myFunction() { + if ("condition") { + console.log("Hello World!"); + } +} +``` + +For now, follow that pattern to use a string `condition` inside your `if` statement. + +# --hints-- + +Your `buyHealth` function should have an `if` statement. + +```js +assert.match(buyHealth.toString(), /if/); +``` + +Your `if` statement should have the string `condition` for the condition. + +```js +assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)/); +``` + +All of your `buyHealth` code should be inside the `if` statement. + +```js +assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)\s*\{[\s\S]*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md new file mode 100644 index 00000000000..e68eacaf744 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md @@ -0,0 +1,221 @@ +--- +id: 62a8c56247609626fa4a8d6e +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +The `condition` string is just a placeholder. Change the `if` statement condition to check if `gold` is greater than or equal to `10`. + +Here is an `if` statement that checks if `num` is greater than or equal to `5`: + +```js +if (num >= 5) { + +} +``` + +# --hints-- + +Your `if` statement should check if `gold` is greater than or equal to `10`. + +```js +assert.match(buyHealth.toString(), /if\s*\(gold\s*>=\s*10\)/); +``` + +Your `buyHealth` function should update `health` and `gold` if `gold` is greater than or equal to `10`. + +```js +gold = 10; +health = 10; +buyHealth(); +assert.equal(health, 20); +assert.equal(gold, 0); +const healthElement = document.getElementById('healthText'); +assert.equal(healthElement.innerText, '20'); +const goldElement = document.getElementById('goldText'); +assert.equal(goldElement.innerText, '0'); +``` + +Your `buyHealth` function should not update `health` and `gold` if `gold` is less than `10`. + +```js +gold = 5; +health = 10; +buyHealth(); +assert.equal(health, 10); +assert.equal(gold, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if ("condition") { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md new file mode 100644 index 00000000000..d29d4fa92c7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md @@ -0,0 +1,206 @@ +--- +id: 62a8c5db7888af27af23f0dd +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Now when a player tries to buy health it will only work if they have enough money. If they do not, nothing will happen. Add an `else` statement where you can put code to run if a player does not have enough money. + +Here is an example of an empty `else` statement: + +```js +if (num >= 5) { + +} else { + +} +``` + +# --hints-- + +Your `buyHealth` function should have an `else` statement. + +```js +assert.match(buyHealth.toString(), /else/); +``` + +Your `else` statement should come after your `if` statement. + +```js +const split = buyHealth.toString().split(/\s/); +assert.isAbove(split.indexOf('else'), split.indexOf('if')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md new file mode 100644 index 00000000000..3ef17db2434 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md @@ -0,0 +1,200 @@ +--- +id: 62a8c65b75664c28a8e59c16 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Inside the `else` statement, set `text.innerText` to equal `You do not have enough gold to buy health.`. + +# --hints-- + +Your `buyHealth` function should set `text.innerText` to equal `You do not have enough gold to buy health.`. + +```js +assert.match(buyHealth.toString(), /text\.innerText\s*=\s*('|")You do not have enough gold to buy health\.\1/); +``` + +Your `buyHealth` function should update `text.innerText` when `gold` is less than `10`. + +```js +gold = 5; +health = 10; +buyHealth(); +assert.equal(text.innerText, 'You do not have enough gold to buy health.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md new file mode 100644 index 00000000000..90b8c75c72f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md @@ -0,0 +1,204 @@ +--- +id: 62a8c6815f5f1a29735efe1b +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Use `const` to create a `weapons` variable above your `locations` array. Assign it an empty array. + +# --hints-- + +You should use `const` to declare your `weapons` variable. + +```js +assert.match(code, /const weapons/i); +``` + +Your `weapons` variable should be an array. + +```js +assert.isArray(weapons); +``` + +Your `weapons` variable should be empty. + +```js +assert.equal(weapons.length, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- + +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md new file mode 100644 index 00000000000..bed05c8d88b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md @@ -0,0 +1,229 @@ +--- +id: 62a8c7322e42962ad53ad204 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Just like your `locations` array, your `weapons` array will hold objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should have the `name` set to `stick` and the `power` set to `5`. The second should be `dagger` and `30`. The third, `claw hammer` and `50`. The fourth, `sword` and `100`. + +# --hints-- + +Your `weapons` array should have four values. + +```js +assert.lengthOf(weapons, 4); +``` + +Your `weapons` array should have four objects. + +```js +assert.isObject(weapons[0]); +assert.isObject(weapons[1]); +assert.isObject(weapons[2]); +assert.isObject(weapons[3]); +``` + +Your first `weapons` object should have the `name` set to `stick` and the `power` set to `5`. + +```js +assert.equal(weapons[0].name, 'stick'); +assert.equal(weapons[0].power, 5); +``` + +Your second `weapons` object should have the `name` set to `dagger` and the `power` set to `30`. + +```js +assert.equal(weapons[1].name, 'dagger'); +assert.equal(weapons[1].power, 30); +``` + +Your third `weapons` object should have the `name` set to `claw hammer` and the `power` set to `50`. + +```js +assert.equal(weapons[2].name, 'claw hammer'); +assert.equal(weapons[2].power, 50); +``` + +Your fourth `weapons` object should have the `name` set to `sword` and the `power` set to `100`. + +```js +assert.equal(weapons[3].name, 'sword'); +assert.equal(weapons[3].power, 100); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const weapons = []; +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md new file mode 100644 index 00000000000..422e0ad66b5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md @@ -0,0 +1,203 @@ +--- +id: 62a8c7a59e72c02bb1c717d2 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Inside your `buyWeapon` function, add an `if` statement to check if `gold` is greater than or equal to `30`. + +# --hints-- + +Your `buyWeapon` function should have an `if` statement. + +```js +assert.include(buyWeapon.toString(), 'if'); +``` + +Your `if` statement should check if `gold` is greater than or equal to `30`. + +```js +assert.match(buyWeapon.toString(), /if\s*\(gold\s*>=\s*30\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md new file mode 100644 index 00000000000..cded49b4395 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md @@ -0,0 +1,215 @@ +--- +id: 62a8c89e4272512d44fc1c66 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Similar to your `buyHealth` function, set `gold` equal to 30 less than its current value. Make sure this is inside your `if` statement. + +# --hints-- + +You should use compound assignment to subtract `30` from `gold`. + +```js +assert.match(buyWeapon.toString(), /gold\s*-=\s*30/); +``` + +Your `buyWeapon` function should reduce `gold` by `30`. + +```js +gold = 30; +buyWeapon(); +assert.equal(gold, 0); +``` + +Your code should be in your `if` statement. + +```js +gold = 20; +buyWeapon(); +assert.equal(gold, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md new file mode 100644 index 00000000000..7f2575cbb11 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md @@ -0,0 +1,219 @@ +--- +id: 62a8c8cee8e5cf2e001789b4 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +The value of the `currentWeapon` variable corresponds to an index in the `weapons` array. The player starts with a `stick`, since `currentWeapon` starts at `0` and `weapons[0]` is the `stick` weapon. + +In the `buyWeapon` function, add one to `currentWeapon` - the user is buying the next weapon in the `weapons` array. + +# --hints-- + +You should use compound assignment to add one to `currentWeapon`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/); +``` + +Your `buyWeapon` function should increase `currentWeapon` by `1`. + +```js +gold = 30; +currentWeapon = 0; +buyWeapon(); +assert.equal(currentWeapon, 1); +``` + +Your code should be in your `if` statement. + +```js +gold = 20; +currentWeapon = 0; +buyWeapon(); +assert.equal(currentWeapon, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md new file mode 100644 index 00000000000..dbd8006158d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md @@ -0,0 +1,208 @@ +--- +id: 62a8ca22d29fe62f3952bdf5 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Increasing a value by 1, or incrementing, has a special operator in JavaScript: `++`. If you wanted to increase `num` by 1, you could write `num++`. + +Change your `currentWeapon` assignment to use the increment operator. + +# --hints-- + +You should use the increment operator to increase `currentWeapon` by `1`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\+\s*\+/); +``` + +You should not use compound assignment to increase `currentWeapon` by `1`. + +```js +assert.notMatch(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon += 1; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md new file mode 100644 index 00000000000..29c3d761fb0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md @@ -0,0 +1,206 @@ +--- +id: 62a8cb19bd7f8a304e5427a1 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Now update the `goldText` element to display the new value of `gold`, and update the `text` element to display `You now have a new weapon.`. + +# --hints-- + +You should update the `innerText` property of the `goldText` element to be `gold`. + +```js +assert.match(buyWeapon.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should update the `innerText` property of the `text` element to be `You now have a new weapon.`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a new weapon\.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md new file mode 100644 index 00000000000..d91e6245ebe --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md @@ -0,0 +1,222 @@ +--- +id: 62a8cbd1e3595431d5a2b3f1 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +You should tell the player what weapon they bought. In between the two lines you just wrote, use `let` to initialize a new variable called `newWeapon`. Set this to equal `weapons`. + +# --hints-- + +Your `buyWeapon` function should have a variable named `newWeapon`. + +```js +assert.match(buyWeapon.toString(), /newWeapon/); +``` + +You should use `let` to declare `newWeapon`. + +```js +assert.match(code, /let\s+newWeapon/); +``` + +`newWeapon` should be initialised to have the value of `weapons`. Don't forget your semi-colon. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons;/); +``` + +`newWeapon` should be declared before you modify `text`. + +```js +const contents = buyWeapon.toString().split(/\s+/); +assert.isBelow(contents.indexOf('newWeapon'), contents.indexOf('text.innerText')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyWeapon, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md new file mode 100644 index 00000000000..165962a1920 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md @@ -0,0 +1,211 @@ +--- +id: 62a8cce1b0c32c33017cf2e9 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For your `newWeapon` variable, use bracket notation to use the `currentWeapon` variable to access an object within the `weapons` array. + +When you use a variable in bracket notation, you are accessing the property or index by the *value* of that variable. + +For example, this code uses the `index` variable to access a value of `array`. + +```js +let value = array[index]; +``` + +# --hints-- + +You should update `newWeapon` to have the value of `weapons[currentWeapon]`. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md new file mode 100644 index 00000000000..7165051ad52 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md @@ -0,0 +1,203 @@ +--- +id: 62a8ce1dfc990134162b3bd9 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +`weapons[currentWeapon]` is an object. Use dot notation to get the `name` property of that object. + +# --hints-- + +You should update `newWeapon` to have the value of `weapons[currentWeapon].name`. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]\.name;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon]; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md new file mode 100644 index 00000000000..4b1f8fb6cb6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md @@ -0,0 +1,222 @@ +--- +id: 62a8ce73d0dce43468f6689c +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +You can insert variables into a string with the concatenation operator `+`. Update the `You now have a new weapon.` string to say `You now have a ` and the name of the new weapon. Remember to end the sentence with a period. + +Here is an example that creates the string `Hello, our name is freeCodeCamp.`: + +```js +const ourName = "freeCodeCamp"; +const ourStr = "Hello, our name is " + ourName + "."; +``` + +# --hints-- + +You should update the `text.innerText` assignment to start with the string `You now have a `. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1/); +``` + +You should use the concatenation operator to add `newWeapon` to the end of the `text.innerText` string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon/); +``` + +You should use the concatenation operator to end your `text.innerText` string with a `.`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon\s*\+\s*('|")\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md new file mode 100644 index 00000000000..748ab4d2f08 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md @@ -0,0 +1,229 @@ +--- +id: 62a8cf22272d6d35af80d4ac +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Back at the beginning of this project, you created the `inventory` array. Add the `newWeapon` to the end of the `inventory` array using the `push()` method. + +Here is an example: + +```js +const arr = ["first"]; +const next = "second"; +arr.push(next); +``` + +`arr` would now have the value `["first", "second"]`. + +# --hints-- + +You should use the `push` method on `inventory`. + +```js +assert.match(buyWeapon.toString(), /inventory\.push/) +``` + +You should `push` the value of `newWeapon` to the `inventory` array. + +```js +assert.match(buyWeapon.toString(), /inventory\.push\s*\(\s*newWeapon\s*\)/) +``` + +Your `buyWeapon` function should add the value of `newWeapon` to the `inventory` array. + +```js +inventory = []; +currentWeapon = 0; +buyWeapon(); +assert.deepEqual(inventory, ["dagger"]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md new file mode 100644 index 00000000000..b7219fb9be1 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md @@ -0,0 +1,218 @@ +--- +id: 62a8d0337d7c67377a4a76c6 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Up until now, any time `text.innerText` was updated the old text was erased. This time, use the `+=` operator to add text to the end of `text.innerText`. Add the string ` In your inventory you have: ` - include the spaces at the beginning and the end. + +# --hints-- + +You should add a new line with `text.innerText`. + +```js +const matches = buyWeapon.toString().match(/text\.innerText/g); +assert.lengthOf(matches, 2); +``` + +You should use the `+=` operator to add to `text.innerText`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*/) +``` + +You should add the string ` In your inventory you have: ` to the end of `text.innerText`. Mind the spaces! + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md new file mode 100644 index 00000000000..098be4a56e6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md @@ -0,0 +1,211 @@ +--- +id: 62a8d08668fa8b38732486e9 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +At the end of the second `text.innerText` string you just added, use the concatenation operator to add the contents of `inventory` to the string. + +# --hints-- + +You should not change the ` In your inventory you have: ` string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/) +``` + +You should use the concatenation operator `+` to add the contents of `inventory` to the string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1\s*\+\s*inventory/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: "; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md new file mode 100644 index 00000000000..3ebebb1edd6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md @@ -0,0 +1,226 @@ +--- +id: 62a8d0c4f12c2239b6618582 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add an `else` statement to your `buyWeapon` function. In that statement, set `text.innerText` to equal `You do not have enough gold to buy a weapon.`. + +# --hints-- + +You should add an `else` statement to your `buyWeapon` function. + +```js +assert.match(buyWeapon.toString(), /else/); +``` + +Your `else` statement should come after your `if` statement. + +```js +const split = buyWeapon.toString().split(/\s|\n/); +assert.isAbove(split.indexOf('else'), split.indexOf('if')); +``` + +You should set `text.innerText` to `You do not have enough gold to buy a weapon.`. + +```js +assert.match(buyWeapon.toString(), /text.innerText\s*=\s*('|")You do not have enough gold to buy a weapon.\1/); +``` + +Your `else` statement should set `text.innerText` to `You do not have enough gold to buy a weapon.`. + +```js +gold = 20; +buyWeapon(); +assert.equal(text.innerText, 'You do not have enough gold to buy a weapon.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md new file mode 100644 index 00000000000..1c2b1476e8f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md @@ -0,0 +1,225 @@ +--- +id: 62a8d0fdf2dad83a92883a80 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +Once a player has the best weapon, they cannot buy another one. Wrap all of the code in your `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than `3` - the index of the last weapon. + +# --hints-- + +You should have a new `if` statement that checks if `currentWeapon` is less than `3`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\<\s*3/) +``` + +Your existing `if` statement should be within your new `if` statement. + +```js +currentWeapon = 5; +gold = 50; +buyWeapon(); +assert.equal(gold, 50); +``` + +Your existing `else` statement should be within your new `if` statement. + +```js +currentWeapon = 5; +gold = 10; +buyWeapon(); +assert.notEqual(text.innerText, "You do not have enough gold to buy a weapon."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md new file mode 100644 index 00000000000..a705f22a61f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md @@ -0,0 +1,215 @@ +--- +id: 62a8d143f2a58e3b6d6e9c33 +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Arrays have a `length` property that returns the number of items in the array. You may want to add new values to the `weapons` array in the future. Change your `if` condition to check if `currentWeapon` is less than the length of the `weapons` array. An example of checking the length of an array `myArray` would look like `myArray.length`. + +# --hints-- + +You should use the `length` property on the `weapons` array. + +```js +assert.match(buyWeapon.toString(), /weapons\.length/); +``` + +Your `if` statement should check if `currentWeapon` is less than `weapons.length`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < 3) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md new file mode 100644 index 00000000000..4db3e483fce --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md @@ -0,0 +1,215 @@ +--- +id: 62a8d1c72e8bb13c2074d93c +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +You now have an error to fix. The `currentWeapon` variable is the index of the `weapons` array, but array indexing starts at zero. The index of the last element in an array is one less than the length of the array. Change the `if` condition to check `weapons.length - 1`, instead of `weapons.length`. + +# --hints-- + +You should update the condition to subtract `1` from `weapons.length`. + +```js +assert.match(buyWeapon.toString(), /weapons\.length\s*-\s*1/); +``` + +Your condition should check if `currentWeapon` is less than `weapons.length - 1`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length\s*-\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md new file mode 100644 index 00000000000..2061307615c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md @@ -0,0 +1,224 @@ +--- +id: 62a8d2146a3e853d0a6e28ca +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Add an `else` statement for your outer `if` statement. Inside this new `else` statement, set `text.innerText` to `You already have the most powerful weapon!`. + +# --hints-- + +You should have another `else` statement in your `buyWeapon` function. + +```js +const matches = buyWeapon.toString().match(/else/g); +assert.equal(matches.length, 2); +``` + +You should set `text.innerText` to `You already have the most powerful weapon!`. + +```js +assert.match(buyWeapon.toString(), /('|")You already have the most powerful weapon!\1/); +``` + +You should modify your `text.innerText` to `You already have the most powerful weapon!` within your outer `else` statement. + +```js +currentWeapon = 5; +buyWeapon(); +assert.equal(text.innerText, "You already have the most powerful weapon!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md new file mode 100644 index 00000000000..cd0c1476164 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md @@ -0,0 +1,229 @@ +--- +id: 62a8d24c97461b3ddb9397c8 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Once a player has the most powerful weapon, you can give them the ability to sell their old weapons. In the outer `else` statement, set `button2.innerText` to `Sell weapon for 15 gold`. Also set `button2.onclick` to the function name `sellWeapon`. + +# --hints-- + +You should set the value of `button2.innerText`. + +```js +assert.match(buyWeapon.toString(), /button2\.innerText/); +``` + +You should set the value of `button2.innerText` to `Sell weapon for 15 gold`. + +```js +assert.match(buyWeapon.toString(), /button2\.innerText\s*=\s*('|")Sell weapon for 15 gold\1;/); +``` + +You should set the value of `button2.onclick`. + +```js +assert.match(buyWeapon.toString(), /button2\.onclick/); +``` + +You should set the value of `button2.onclick` to `sellWeapon`. + +```js +assert.match(buyWeapon.toString(), /button2\.onclick\s*=\s*sellWeapon;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md new file mode 100644 index 00000000000..a5e28c829e7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md @@ -0,0 +1,221 @@ +--- +id: 62a8d2e2a073be3edb46116f +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Create an empty `sellWeapon` function. + +# --hints-- + +You should use the `function` keyword to declare a `sellWeapon` variable. + +```js +assert.isFunction(sellWeapon); +``` + +`sellWeapon` should be an empty function. + +```js +assert.match(sellWeapon.toString(), /sellWeapon\(\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md new file mode 100644 index 00000000000..77100cf5462 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md @@ -0,0 +1,223 @@ +--- +id: 62a8d31ebbc10e3fe1b28e03 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Players should not be able to sell their only weapon. Inside the `sellWeapon` function, add an `if` statement with a condition that checks if the length of the `inventory` array is greater than `1`. + +# --hints-- + +Your `sellWeapon` function should have an `if` statement. + +```js +assert.match(sellWeapon.toString(), /if/); +``` + +Your `if` statement should check if `inventory.length` is greater than `1`. + +```js +assert.match(sellWeapon.toString(), /if\s*\(inventory\.length\s*>\s*1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md new file mode 100644 index 00000000000..dbbf432519d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md @@ -0,0 +1,234 @@ +--- +id: 62a8d35660db4040ba292193 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Inside the `if` statement, set `gold` equal to `15` more than its current value. Also update `goldText.innerText` to the new value. + +# --hints-- + +You should use compound assignment to increase `gold` by `15`. + +```js +assert.match(sellWeapon.toString(), /gold\s*\+=\s*15/); +``` + +You should set `goldText.innerText` to `gold`. + +```js +assert.match(sellWeapon.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +Your code should be in your `if` statement. + +```js +inventory = ["Naomi"]; +gold = 0 +sellWeapon(); +assert.equal(gold, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md new file mode 100644 index 00000000000..8f3764e0ef9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md @@ -0,0 +1,223 @@ +--- +id: 62a8d382cd075f4169223e14 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Use the `let` keyword to create a variable named `currentWeapon`. Don't assign it a value yet. + +Notice that you already have a `currentWeapon` variable elsewhere in your code. Since you are using the `let` keyword instead of `var`, the new `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old `currentWeapon` will be used again. + +# --hints-- + +You should use `let` to declare a `currentWeapon` variable. + +```js +assert.match(sellWeapon.toString(), /currentWeapon/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md new file mode 100644 index 00000000000..1fb5303efc5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md @@ -0,0 +1,233 @@ +--- +id: 62a8d539dc11cb42b5dd7ec8 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +The `shift()` method on an array removes the first element in the array and returns it. Use this method to take the first element from the `inventory` array and assign it to your `currentWeapon` variable. + +# --hints-- + +Your `sellWeapon` function should use the `shift()` method. + +```js +assert.match(sellWeapon.toString(), /shift\(\)/); +``` + +You should use the `shift()` method on the `inventory` array. + +```js +assert.match(sellWeapon.toString(), /inventory\.shift\(\)/); +``` + +You should assign the value of `inventory.shift()` to your `currentWeapon` variable. + +```js +assert.match(sellWeapon.toString(), /currentWeapon\s*=\s*inventory\.shift\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md new file mode 100644 index 00000000000..03e5cceea99 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md @@ -0,0 +1,249 @@ +--- +id: 62a8d61ddfe35744369365b7 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +After your `currentWeapon`, use the concatenation operator to set `text.innerText` to the string `You sold a `, then `currentWeapon`, then the string `.`. + +# --hints-- + +You should use the assignment operator with `text.innerText`. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=/); +``` + +You should add `You sold a ` to `text.innerText`. Spacing is important. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1/); +``` + +You should add the value of `currentWeapon` to the `You sold a ` string. Use the concatenation operator to do this on the same line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a\s\1\s*\+\s*\_currentWeapon/); +``` + +You should add the string `.` to the value of `currentWeapon`. Use the concatenation operator to do this on the same line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1\s*\+\s*\_currentWeapon\s+\+\s+('|")\.\2/); +``` + +Your `text.innerText` should update to the proper string. + +```js +inventory = ["first", "second"]; +text.innerText = "Hello"; +sellWeapon(); +assert.equal(text.innerText, "You sold a first."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md new file mode 100644 index 00000000000..bc8435faa22 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md @@ -0,0 +1,243 @@ +--- +id: 62a8d6c7001ebc45350e3d16 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Now use the `+=` operator to add the string ` In your inventory you have: ` and the contents of `inventory` to the `text.innerText`. Make sure to include the space at the beginning and end of the ` In your inventory you have: ` string. + +# --hints-- + +You should add another `text.innerText` line. + +```js +const matches = sellWeapon.toString().match(/text\.innerText/g); +assert.equal(matches.length, 2); +``` + +You should use compound assignment on `text.innerText`. + +```js +const matches = sellWeapon.toString().match(/text\.innerText\s*\+=/g); +assert.equal(matches.length, 1); +``` + +You should add the string ` In your inventory you have: ` to the second `text.innerText` line. Spacing matters. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1/); +``` + +You should use the concatenation operator to add the value of `inventory` to the end of your second `text.innerText` line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1\s*\+\s*inventory/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md new file mode 100644 index 00000000000..3e59ee00a2d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md @@ -0,0 +1,237 @@ +--- +id: 62a8d7b8ab568b4649998954 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Use an `else` statement to run when the `inventory` length is not more than one. Set the `text.innerText` to say `Don't sell your only weapon!`. + +# --hints-- + +Your `sellWeapon` function should have an `else` statement. + +```js +assert.match(sellWeapon.toString(), /else/); +``` + +You should set `text.innerText` to `Don't sell your only weapon!`. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")Don't sell your only weapon!\1/); +``` + +Your new `text.innerText` line should be in your `else` statement. + +```js +inventory = ["Naomi"]; +sellWeapon(); +assert.equal(text.innerText, "Don't sell your only weapon!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md new file mode 100644 index 00000000000..f47ecd3e581 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md @@ -0,0 +1,310 @@ +--- +id: 62a8d81f539f004776dd9b1e +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Now you can start the code to fight monsters. To keep your code organized, your `fightDragon` function has been moved for you to be near the other `fight` functions. + +Below your `weapons` array, define a `monsters` variable and assign it an array. Set that array to have three objects, each with a `name`, `level`, and `health` properties. The first object's values should be `slime`, `2`, and `15`, in order. The second should be `fanged beast`, `8`, and `60`. The third should be `dragon`, `20`, and `300`. + +# --hints-- + +You should use `const` to declare a `monsters` variable. + +```js +assert.match(code, /const\s*monsters/); +``` + +Your `monsters` variable should be an array. + +```js +assert.isArray(monsters); +``` + +Your `monsters` variable should have 3 values. + +```js +assert.lengthOf(monsters, 3); +``` + +Your `monsters` array should have 3 objects. + +```js +assert(monsters.every(val => typeof val === "object")); +``` + +The first value in your `monsters` array should have an object with a `name` property set to `slime`. + +```js +assert.equal(monsters[0].name, "slime"); +``` + +The first value in your `monsters` array should have an object with a `level` property set to `2`. + +```js +assert.equal(monsters[0].level, 2); +``` + +The first value in your `monsters` array should have an object with a `health` property set to `15`. + +```js +assert.equal(monsters[0].health, 15); +``` + +The second value in your `monsters` array should have an object with a `name` property set to `fanged beast`. + +```js +assert.equal(monsters[1].name, "fanged beast"); +``` + +The second value in your `monsters` array should have an object with a `level` property set to `8`. + +```js +assert.equal(monsters[1].level, 8); +``` + +The second value in your `monsters` array should have an object with a `health` property set to `60`. + +```js +assert.equal(monsters[1].health, 60); +``` + +The third value in your `monsters` array should have an object with a `name` property set to `dragon`. + +```js +assert.equal(monsters[2].name, "dragon"); +``` + +The third value in your `monsters` array should have an object with a `level` property set to `20`. + +```js +assert.equal(monsters[2].level, 20); +``` + +The third value in your `monsters` array should have an object with a `health` property set to `300`. + +```js +assert.equal(monsters[2].health, 300); +``` + +You should not add any extra properties to your objects. + +```js +assert.deepEqual(monsters, [ + {name: "slime", level: 2, health: 15}, + {name: "fanged beast", level: 8, health: 60}, + {name: "dragon", level: 20, health: 300} +]) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +--fcc-editable-region-- + +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + +} + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md new file mode 100644 index 00000000000..4167fc0a12b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md @@ -0,0 +1,250 @@ +--- +id: 62a8dd468debb449b4454086 +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +Fighting each type of monster will use similar logic. Create an empty function called `goFight` to manage this logic. + +# --hints-- + +You should use the `function` keyword to declare `goFight`. + +```js +assert.match(code, /function\s*goFight/); +``` + +`goFight` should be an empty function. + +```js +assert.match(goFight.toString(), /goFight\s*\(\s*\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + +} + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md new file mode 100644 index 00000000000..b960134fac7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md @@ -0,0 +1,260 @@ +--- +id: 62a8dd9cdb16324b04cfd958 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +In your `fightSlime` function, set `fighting` equal to `0` - the index of `slime` in the `monsters` array. Remember that you already declared `fighting` earlier in your code, so you do not need `let` or `const` here. + +On the next line, call the `goFight` function. + +# --hints-- + +You should set `fighting` equal to `0`. + +```js +assert.match(fightSlime.toString(), /fighting\s*=\s*0;/); +``` + +You should not use `let` or `const`. + +```js +assert.notMatch(fightSlime.toString(), /let|const|var/); +``` + +You should call the `goFight` function. + +```js +assert.match(fightSlime.toString(), /goFight\(\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +--fcc-editable-region-- +function fightSlime() { + +} +--fcc-editable-region-- + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function goFight() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md new file mode 100644 index 00000000000..aa331ca8991 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md @@ -0,0 +1,259 @@ +--- +id: 62a8dfcf7fb1044d2f478fd1 +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Following the same pattern, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also remove the `console.log` call from your `fightDragon` function. + +# --hints-- + +You should set `fighting` to `1` in your `fightBeast` function. + +```js +assert.match(fightBeast.toString(), /fighting\s*=\s*1;/); +``` + +You should set `fighting` to `2` in your `fightDragon` function. + +```js +assert.match(fightDragon.toString(), /fighting\s*=\s*2;/); +``` + +You should remove the `console.log` from your `fightDragon` function. + +```js +assert.notMatch(fightDragon.toString(), /console\.log/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +--fcc-editable-region-- +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} +--fcc-editable-region-- + +function goFight() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md new file mode 100644 index 00000000000..5eccfafdc9b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md @@ -0,0 +1,269 @@ +--- +id: 62a8e0d1d0110b4ec421489f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +At the end of your code, create two empty functions named `attack` and `dodge`. + +# --hints-- + +You should use the `function` keyword to declare `attack`. + +```js +assert.match(code, /function\s*attack/); +``` + +`attack` should be an empty function. + +```js +assert.match(attack.toString(), /attack\s*\(\s*\)\s*\{\s*\}/); +``` + +You should use the `function` keyword to declare `dodge`. + +```js +assert.match(code, /function\s*dodge/); +``` + +`dodge` should be an empty function. + +```js +assert.match(dodge.toString(), /dodge\s*\(\s*\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md new file mode 100644 index 00000000000..70d0725b1d9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md @@ -0,0 +1,288 @@ +--- +id: 62a8e142f7f0bd4fed898de3 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Add a new object to the end of the `locations` array, following the same properties as the rest of the objects. Set `name` to `fight`, `button text` to an array with `Attack`, `Dodge`, and `Run`, `button functions` to an array with `attack`, `dodge`, and `goTown`, and `text` to `You are fighting a monster.`. + +# --hints-- + +Your `locations` array should have 4 values in it. + +```js +console.log(locations); +assert.lengthOf(locations, 4); +``` + +Your new value should be an object. + +```js +assert.isObject(locations[3]); +``` + +Your new object should have a `name` property set to `fight`. + +```js +assert.equal(locations[3].name, "fight"); +``` + +Your new object should have a `button text` property set to an array with the strings `Attack`, `Dodge`, and `Run`. + +```js +assert.deepEqual(locations[3]["button text"], ["Attack", "Dodge", "Run"]); +``` + +Your new object should have a `button functions` property set to an array with the variables `attack`, `dodge`, and `goTown`. + +```js +assert.deepEqual(locations[3]["button functions"], [attack, dodge, goTown]); +``` + +Your new object should have a `text` property set to `You are fighting a monster.`. + +```js +assert.equal(locations[3].text, "You are fighting a monster."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + +} + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md new file mode 100644 index 00000000000..d87c8179a6e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md @@ -0,0 +1,269 @@ +--- +id: 62a8e1dc897df55108bcb5e8 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +In the `goFight` function, call your `update` function with the fourth object in `locations` as an argument. + +# --hints-- + +You should call `update` in your `goFight` function. + +```js +assert.match(goFight.toString(), /update/); +``` + +You should pass the fourth object in your `locations` array to your `update` call. + +```js +assert.match(goFight.toString(), /update\(locations\[3\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md new file mode 100644 index 00000000000..ec221bb2490 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md @@ -0,0 +1,270 @@ +--- +id: 62a8e21398ad61520edb724f +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Below your `update` call, set the `monsterHealth` to be the health of the current monster. You can get this value by accessing the `health` property of `monsters[fighting]`. + +# --hints-- + +You should use bracket notation to access the `monsters` array at the `fighting` index. + +```js +assert.match(goFight.toString(), /monsters\[fighting\]/); +``` + +You should assign the value of `monsters[fighting]` to the `monsterHealth` variable. + +```js +assert.match(goFight.toString(), /monsterHealth\s*=\s*monsters\[fighting\](\.health|\[('|")health\2\])/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md new file mode 100644 index 00000000000..64379cb2b5d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md @@ -0,0 +1,281 @@ +--- +id: 62a8e24c673b075317cc0b09 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +The HTML element that shows the monster's stats has been hidden with CSS. Display the `monsterStats` element by updating the `display` property of the `style` property to `block`. For example, updating the `first` property of the `name` property of `user` would look like: + +```js +user.name.first = "Naomi"; +``` + +# --hints-- + +You should use dot notation to access the `style` property of `monsterStats`. + +```js +assert.match(goFight.toString(), /monsterStats\.style/); +``` + +You should use dot notation to access the `display` property of the `style` property. + +```js +assert.match(goFight.toString(), /monsterStats\.style\.display/); +``` + +You should set the `display` property to `block`. + +```js +assert.match(goFight.toString(), /monsterStats\.style\.display\s*=\s*('|")block\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md new file mode 100644 index 00000000000..0ccd9de7c1a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md @@ -0,0 +1,284 @@ +--- +id: 62a8e271f8e3d1541f9624ad +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Now set the `innerText` property of `monsterName` to be the `name` property of the current monster. Do the same for `monsterHealthText` and the `health` property. + +# --hints-- + +You should use dot notation to access the `innerText` property of `monsterName`. + +```js +assert.match(goFight.toString(), /monsterName\.innerText/); +``` + +You should set the `innerText` property of `monsterName` to be the `name` value of the current monster. Remember that you can get the current monster with `monsters[fighting]`. + +```js +assert.match(goFight.toString(), /monsterName\.innerText\s*=\s*monsters\[fighting\]\.name/); +``` + +You should use dot notation to access the `innerText` property of `monsterHealthText`. + +```js +assert.match(goFight.toString(), /monsterHealthText\.innerText/); +``` + +You should set the `innerText` property of `monsterHealthText` to be the `health` value of the current monster. Remember that you assigned this value to a `monsterHealth` variable. + +```js +assert.match(goFight.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md new file mode 100644 index 00000000000..229ca08f2a2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md @@ -0,0 +1,285 @@ +--- +id: 62a8e35675c18c56354c08cf +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Now you can build the `attack` function. First, update the `text` message to say `The [monster name] attacks.`, replacing `[monster name]` with the name of the monster. Remember you can use the concatenation operator for this. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text`. + +```js +assert.match(attack.toString(), /text\.innerText/); +``` + +You should assign the string `The ` to `innerText` property of `text`. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1/); +``` + +You should use the concatenation operator to add the value of `monsters[fighting].name` to the `The ` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name/); +``` + +You should use the concatenation operator to add the string ` attacks.` to the `monsters[fighting].name` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name\s*\+\s*('|") attacks\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md new file mode 100644 index 00000000000..6566de3802a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md @@ -0,0 +1,293 @@ +--- +id: 62a8e41e2f190c58404dd46e +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +On a new line, add the string ` You attack it with your [weapon].` to the `text` value, replacing `[weapon]` with the player's current weapon. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text` on a new line. + +```js +const match = attack.toString().match(/text\.innerText/g); +assert.lengthOf(match, 2); +``` + +You should use compound assignment with `text.innerText`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=/); +``` + +You should add the string ` You attack it with your ` to the `text.innerText` value. Remember that spacing matters. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1/); +``` + +You should use the concatenation operator to add the current weapon to the string. You can get the current weapon with `weapons[currentWeapon].name`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name/); +``` + +You should use the concatenation operator to end your string with `.`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name\s*\+\s*('|")\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md new file mode 100644 index 00000000000..7ebd6d5383a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md @@ -0,0 +1,275 @@ +--- +id: 62a8e45cc600c3591cee671a +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Next, set `health` to equal `health` minus the monster's level. Remember you can get this from the `monsters[fighting].level` property. + +# --hints-- + +You should use compound assignment with `health`. + +```js +assert.match(attack.toString(), /health\s*-=/); +``` + +You should subtract the monster's current level from `health`. + +```js +assert.match(attack.toString(), /health\s*-=\s*monsters\[fighting\]\.level/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md new file mode 100644 index 00000000000..687f2f04e57 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md @@ -0,0 +1,288 @@ +--- +id: 62a8e49f4df7af5ae2d7a616 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember you have the `currentWeapon` variable and the `power` property. + +# --hints-- + +You should use compound assignment to modify the `monsterHealth` variable. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=/); +``` + +You should use bracket notation with `currentWeapon` to access `weapons`. + +```js +assert.match(attack.toString(), /weapons\[currentWeapon\]/); +``` + +You should use dot notation to access the `power` property of `weapons[currentWeapon]`. + +```js +assert.match(attack.toString(), /weapons\[currentWeapon\]\.power/); +``` + +You should subtract the `power` of the current weapon from `monsterHealth`. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md new file mode 100644 index 00000000000..fe85bcd7f75 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md @@ -0,0 +1,316 @@ +--- +id: 62a8e4dc6a60f85bf256a0cb +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +JavaScript offers the built-in `Math` utility which offers a number of mathematical tools. One of those is `Math.random()`, which generates a random number between 0 and 1. Another is `Math.floor()`, which rounds a given number down to the nearest integer. + +Using these, you can generate a random number within a range. For example, this generates a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1;`. + +Following this pattern, add a random number between one and the value of `xp` at the end of your `monsterHealth` variable change. + +# --hints-- + +You should use the same `monsterHealth` line you already wrote. + +```js +assert.lengthOf(attack.toString().match(/monsterHealth/g), 1); +``` + +You should add to the `weapons[currentWeapon].power` value. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+/); +``` + +You should use `Math.floor()`. + +```js +assert.match(attack.toString(), /Math\.floor/); +``` + +You should use `Math.random()`. + +```js +assert.match(attack.toString(), /Math\.random/); +``` + +You should multiply `Math.random()` by the value of `xp`. + +```js +assert.match(attack.toString(), /Math\.random\(\)\s*\*\s*xp/); +``` + +You should use `Math.floor()` to round the result of `Math.random() * xp` down. + +```js +assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)/); +``` + +You should add `1` to the result of `Math.floor()`. + +```js +assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/); +``` + +You should add the result of `Math.floor(Math.random() * xp) + 1` to the result of `weapons[currentWeapon].power`. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power; +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md new file mode 100644 index 00000000000..a2c6fde768a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md @@ -0,0 +1,289 @@ +--- +id: 62a8ed36d7a7915dfa444ba2 +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`. + +# --hints-- + +You should update `healthText.innerText`. + +```js +assert.match(attack.toString(), /healthText\.innerText/); +``` + +You should set `healthText.innerText` to `health`. + +```js +assert.match(attack.toString(), /healthText\.innerText\s*=\s*health/); +``` + +You should update `monsterHealthText.innerText`. + +```js +assert.match(attack.toString(), /monsterHealthText\.innerText/); +``` + +You should set `monsterHealthText.innerText` to `monsterHealth`. + +```js +assert.match(attack.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md new file mode 100644 index 00000000000..acf1efd38b0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md @@ -0,0 +1,285 @@ +--- +id: 62a8edd05e27cc668051686f +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +Add an `if` statement to check if `health` is less than or equal to `0`. If it is, call the `lose` function. + +# --hints-- + +Your `attack` function should have an `if` statement. + +```js +assert.match(attack.toString(), /if/); +``` + +Your `if` statement should check if `health` is less than or equal to `0`. + +```js +assert.match(attack.toString(), /if\s*\(health\s*<=\s*0\)/); +``` + +Your `if` statement should call the `lose` function. + +```js +assert.match(attack.toString(), /lose\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md new file mode 100644 index 00000000000..ac058ac03bc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md @@ -0,0 +1,297 @@ +--- +id: 62a8ee154c8946678775c4a4 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +You can make an `else` statement conditional by using `else if`. At the end of your `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to `0`. In your `else if`, call the `defeatMonster` function. + +Here's an example: + +```js +if (num > 10) { + +} else if (num < 5) { + +} +``` + +# --hints-- + +You should have an `else if` statement. + +```js +assert.match(attack.toString(), /else if/); +``` + +Your `else if` statement should check if `monsterHealth` is less than or equal to `0`. + +```js +assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)/); +``` + +Your `else if` statement should call the `defeatMonster` function. + +```js +assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)\s*\{\s*defeatMonster/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md new file mode 100644 index 00000000000..94244500db9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md @@ -0,0 +1,297 @@ +--- +id: 62a8ee71f018e968a056d369 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +At the end of your code, create the `defeatMonster` and `lose` functions. Leave them empty for now. + +# --hints-- + +You should use the `function` keyword to declare `defeatMonster`. + +```js +assert.match(code, /function\s+defeatMonster/); +``` + +`defeatMonster` should be an empty function. + +```js +assert.match(defeatMonster.toString(), /defeatMonster\s*\(\)\s*\{\s*\}/); +``` + +You should use the `function` keyword to declare `lose`. + +```js +assert.match(code, /function\s+lose/); +``` + +`lose` should be an empty function. + +```js +assert.match(lose.toString(), /lose\s*\(\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md new file mode 100644 index 00000000000..3524f53b4a3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md @@ -0,0 +1,291 @@ +--- +id: 62a8eec45f77bc69e8775294 +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Inside the `dodge` function, set `text.innerText` equal to the string `You dodge the attack from the [monster]`. Replace `[monster]` with the name of the monster, using the `name` property. + +# --hints-- + +You should assign the string `You dodge the attack from the ` to the `text.innerText` property. Remember that spacing matters. + +```js +assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/); +``` + +You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`. + +```js +assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +--fcc-editable-region-- +function dodge() { + +} +--fcc-editable-region-- + +function defeatMonster() { + +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md new file mode 100644 index 00000000000..f67c008aa05 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md @@ -0,0 +1,299 @@ +--- +id: 62a8eefe2e68b66ac563816b +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +In your `defeatMonster` function, set `gold` equal to `gold` plus the monster's level times `6.7`. You can get the monster's level with the `level` property. + +Here is an example of setting `num` to `num` plus `5` * `8`: `num += 5 * 8`. Use `Math.floor()` to round the result down. + +# --hints-- + +You should use compound assignment to modify `gold`. + +```js +assert.match(defeatMonster.toString(), /gold\s*\+=/); +``` + +You should use `Math.floor()` to round the result of the monster's level times `6.7`. + +```js +assert.match(defeatMonster.toString(), /Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/); +``` + +You should add the result of `Math.floor(gold + monsters[fighting].level * 6.7)` to `gold`. + +```js +assert.match(defeatMonster.toString(), /gold\s*\+=\s*Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md new file mode 100644 index 00000000000..678fd1314fc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md @@ -0,0 +1,292 @@ +--- +id: 62a8ef6a52292f6bdca4f6f8 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Set `xp` to `xp` plus the monster's level. + +# --hints-- + +You should use compound assignment to modify `xp`. + +```js +assert.match(defeatMonster.toString(), /xp\s*\+=/); +``` + +You should add the monster's level to `xp`. + +```js +assert.match(defeatMonster.toString(), /xp\s*\+=\s*monsters\[fighting\]\.level/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md new file mode 100644 index 00000000000..cb9eadcb3ec --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md @@ -0,0 +1,293 @@ +--- +id: 62a8ef8f0c76a46cd221a68c +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +Now update `goldText` and `xpText` to display the updated values. + +# --hints-- + +You should update `goldText.innerText` to the value of `gold`. + +```js +assert.match(defeatMonster.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should update `xpText.innerText` to the value of `xp`. + +```js +assert.match(defeatMonster.toString(), /xpText\.innerText\s*=\s*xp/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md new file mode 100644 index 00000000000..ca92f837431 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md @@ -0,0 +1,295 @@ +--- +id: 62a8efb0e3ce826db8daf80f +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Finish the `defeatMonster` function by calling the `update` function with `locations[4]` as the argument. + +# --hints-- + +You should call the `update` function. + +```js +assert.match(defeatMonster.toString(), /update/); +``` + +You should pass `locations[4]` as the argument. + +```js +assert.match(defeatMonster.toString(), /update\(locations\[4\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md new file mode 100644 index 00000000000..dd0068655fd --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md @@ -0,0 +1,319 @@ +--- +id: 62a8eff21c0b0f6ebe5b8e38 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Your `locations` array doesn't have a fifth element, so `locations[4]` doesn't work. Add a new object at the end of the `locations` array, following the same structure as the other objects. Set `name` to `kill monster`, set `button text` to an array with three `Go to town square` strings, set `button functions` to an array with three `goTown` variables, and set `text` to `The monster screams Arg! as it dies. You gain experience points and find gold.`. + +# --hints-- + +Your `locations` array should have five values. + +```js +assert.lengthOf(locations, 5); +``` + +Your fifth `locations` value should be an object. + +```js +assert.isObject(locations[4]); +``` + +Your fifth `locations` value should have a `name` property with the value `kill monster`. + +```js +assert.equal(locations[4].name, 'kill monster'); +``` + +Your fifth `locations` value should have a `button text` property with the value an array with three `Go to town square` strings. + +```js +assert.deepEqual(locations[4]["button text"], ['Go to town square', 'Go to town square', 'Go to town square']); +``` + +Your fifth `locations` value should have a `button functions` property with the value an array with three `goTown` variables. + +```js +assert.deepEqual(locations[4]["button functions"], [goTown, goTown, goTown]); +``` + +Your fifth `locations` value should have a `text` property with the value `The monster screams Arg! as it dies. You gain experience points and find gold.`. + +```js +assert.equal(locations[4].text, 'The monster screams Arg! as it dies. You gain experience points and find gold.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md new file mode 100644 index 00000000000..ad30c67858d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md @@ -0,0 +1,301 @@ +--- +id: 62a8f06fb318666fef69f91e +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The word `Arg!` should have quotes around it. Besides escaping quotes, there is another way you can include quotation marks inside a string. Change the double quotes around the string `The monster screams Arg! as it dies. You gain experience points and find gold.` to single quotes `'`, then add double quotes around `Arg!`. + +# --hints-- + +You should use single quotes around the string. + +```js +assert.match(code, /'The monster screams "?Arg!"? as it dies. You gain experience points and find gold.'/); +``` + +You should use double quotes around `Arg!`. + +```js +assert.equal(locations[4].text, 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, +--fcc-editable-region-- + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: "The monster screams Arg! as it dies. You gain experience points and find gold." + } +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md new file mode 100644 index 00000000000..ee850581fa7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md @@ -0,0 +1,308 @@ +--- +id: 62a8f14fe6d1fc72454648c7 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +After a monster is defeated, the monster's stat box should no longer display. On the first line of the `update` function, use `monsterStats.style.display` to change the `display` value to `none`. + +# --hints-- + +You should use `monsterStats.style.display` in the `update` function. + +```js +assert.match(update.toString(), /monsterStats\.style\.display/); +``` + +You should set `monsterStats.style.display` to `none`. + +```js +assert.match(update.toString(), /monsterStats\.style\.display\s*=\s*('|")none\1/); +``` + +This should be the first line of the `update` function. + +```js +assert.match(update.toString(), /update\s*\(\s*location\s*\)\s*\{\s*monsterStats\.style\.display\s*=\s*('|")none\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md new file mode 100644 index 00000000000..de99851e153 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md @@ -0,0 +1,296 @@ +--- +id: 62a8f1d5f5ddbf74c07f733b +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +In the `lose` function, call the `update` function and pass in the sixth object of your `locations` array. Note that you haven't created this object just yet. + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +--fcc-editable-region-- +function lose() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md new file mode 100644 index 00000000000..097ae332be3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md @@ -0,0 +1,356 @@ +--- +id: 62a8f20463b324759953edad +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +At the end of your code, create a `restart` function. Inside this function, set `xp` to `0`, `health` to `100`, `gold` to `50`, `currentWeapon` to `0`, and set `inventory` to an array with the string `stick`. + +Also update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values. + +Finally, call the `goTown()` function. + +# --hints-- + +You should use the `function` keyword to declare `restart`. + +```js +assert.match(code, /function\s+restart/); +``` + +Your `restart` function should set `xp` to `0`. + +```js +assert.match(restart.toString(), /xp\s*=\s*0/); +``` + +Your `restart` function should set `health` to `100`. + +```js +assert.match(restart.toString(), /health\s*=\s*100/); +``` + +Your `restart` function should set `gold` to `50`. + +```js +assert.match(restart.toString(), /gold\s*=\s*50/); +``` + +Your `restart` function should set `currentWeapon` to `0`. + +```js +assert.match(restart.toString(), /currentWeapon\s*=\s*0/); +``` + +Your `restart` function should set `inventory` to an array with the string `stick`. + +```js +assert.match(restart.toString(), /inventory\s*=\s*\[\s*('|")stick\1\s*\]/); +``` + +Your `restart` function should call the `goTown()` function. + +```js +assert.match(restart.toString(), /goTown\(\)/); +``` + +You should set `goldText.innerText` to the value of `gold`. + +```js +assert.match(restart.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should set `healthText.innerText` to the value of `health`. + +```js +assert.match(restart.toString(), /healthText\.innerText\s*=\s*health/); +``` + +You should set `xpText.innerText` to the value of `xp`. + +```js +assert.match(restart.toString(), /xpText\.innerText\s*=\s*xp/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md new file mode 100644 index 00000000000..84ad6a8fbc2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md @@ -0,0 +1,353 @@ +--- +id: 62a8f256b813a476cae51f49 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block. + +Here is an example that checks if `num` is equal to `5`: + +```js +if (num === 5) { + +} else { + +} +``` + +# --hints-- + +You should add a new `if` statement in your `else if` block. + +```js +const block = attack.toString().split("else if"); +assert.include(block[1], "if"); +``` + +Your new `if` statement should check if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)/); +``` + +You should call the `winGame` function in your `if` block. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)\s*\{\s*winGame\(\)/); +``` + +You should add an `else` block. + +```js +const block = attack.toString().split("else if"); +assert.include(block[1], "else"); +``` + +Your `else` block should call the `defeatMonster` function. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /else\s*\{\s*defeatMonster\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md new file mode 100644 index 00000000000..cd564871491 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md @@ -0,0 +1,355 @@ +--- +id: 62a8f2bc37675e77d5835235 +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. + +Here is an example of an `if-else` expression changed to a ternary: + +```js +if (num > 5) { + bigger() +} else { + smaller() +} + +num > 5 ? bigger() : smaller(); +``` + +Change your new `if-else` expression to a ternary. + +# --hints-- + +You should remove the `if` and `else` from your `else if` block. + +```js +const block = attack.toString().split("else if"); +assert.notMatch(block[1], /if/); +assert.notMatch(block[1], /else/); +``` + +You should check if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2/); +``` + +Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); +``` + +Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + if (fighting === 2) { + winGame(); + } else { + defeatMonster(); + } + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md new file mode 100644 index 00000000000..6cf34e927c5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md @@ -0,0 +1,322 @@ +--- +id: 62a8f35bde1750791f58773f +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +After the `lose` function, create a function called `winGame`. Inside the `winGame` function, call the `update` function and pass in `locations[6]`. + +# --hints-- + +You should use the `function` keyword to declare `winGame`. + +```js +assert.match(code, /function\s+winGame/); +``` + +Your `winGame` function should call the `update` function and pass in `locations[6]`. + +```js +assert.match(winGame.toString(), /update\s*\(\s*locations\[6\]\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md new file mode 100644 index 00000000000..8522ebd7445 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md @@ -0,0 +1,348 @@ +--- +id: 62a94114ce0b8918b487390f +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Add another object in the `locations` array. Everything should be the same as the `lose` object, except the `name` should be `win` and the `text` should be `You defeat the dragon! YOU WIN THE GAME! 🎉`. + +# --hints-- + +You should have seven values in the `locations` array. + +```js +assert.lengthOf(locations, 7); +``` + +Your seventh `locations` value should be an object. + +```js +assert.isObject(locations[6]); +``` + +Your seventh `locations` value should have a `name` property with the value `win`. + +```js +assert.equal(locations[6].name, 'win'); +``` + +Your seventh `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings. + +```js +assert.deepEqual(locations[6]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']); +``` + +Your seventh `locations` value should have a `button functions` property with the value an array with three `restart` variables. + +```js +assert.deepEqual(locations[6]["button functions"], [restart, restart, restart]); +``` + +Your seventh `locations` value should have a `text` property with the value `You defeat the dragon! YOU WIN THE GAME! 🎉`. + +```js +assert.equal(locations[6].text, 'You defeat the dragon! YOU WIN THE GAME! 🎉'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md new file mode 100644 index 00000000000..d38e7a2c1e2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md @@ -0,0 +1,326 @@ +--- +id: 62aa1cea594f152ba626b872 +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Your game could be complete now, but you can also make it more interesting. + +Inside your `attack` function, change your `health -= monsters[fighting].level;` line to `health -= getMonsterAttackValue(monsters[fighting].level);`. This sets `health` equal to `health` minus the return value of the `getMonsterAttackValue` function, and passes the `level` of the monster as an argument. + +# --hints-- + +You should update your `health` line to be `health -= getMonsterAttackValue(monsters[fighting].level);`. + +```js +assert.match(attack.toString(), /health\s*-=\s*getMonsterAttackValue\(monsters\[fighting\].level\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md new file mode 100644 index 00000000000..1dd06a164f4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md @@ -0,0 +1,332 @@ +--- +id: 62aa1d6736ba262cfa74344b +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Below your `attack` function, create an empty function named `getMonsterAttackValue`. It should take `level` as a parameter. + +# --hints-- + +You should use the `function` keyword to declare `getMonsterAttackValue`. + +```js +assert.match(code, /function\s+getMonsterAttackValue/); +``` + +Your `getMonsterAttackValue` should take `level` as a parameter. + +```js +assert.match(code, /getMonsterAttackValue\(\s*level\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md new file mode 100644 index 00000000000..62f2bd62862 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md @@ -0,0 +1,342 @@ +--- +id: 62aa1d9f535e102e4663e7a6 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +The attack of the monster will be based on the monster's `level` and the player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Assign it the equation `(level * 5) - (Math.floor(Math.random() * xp));`. + +This will set the monster's attack to five times their `level` minus a random number between 0 and the player's `xp`. + +# --hints-- + +You should use `const` to declare the variable `hit`. + +```js +assert.match(code, /const\s*hit/); +``` + +You should use the equation `(level * 5) - (Math.floor(Math.random() * xp))`. + +```js +assert.match(getMonsterAttackValue, /(level\s*\*\s*5)\s*-\s*(Math.floor\(Math.random\(\)\s*\*\s*xp\))/); +``` + +You should set `hit` to the value of `(level * 5) - (Math.floor(Math.random() * xp))`. + +```js +assert.match(code, /hit\s*=\s*\(level\s*\*\s*5\)\s*-\s*\(Math.floor\(Math.random\(\)\s*\*\s*xp\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md new file mode 100644 index 00000000000..0e1f69267c5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md @@ -0,0 +1,328 @@ +--- +id: 62aa1e3c7c3d552fb04f0f18 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Log the value of `hit` to the console to use in debugging. Remember that you can do this with `console.log()`. + +# --hints-- + +You should use the `console.log()` function to log the value of `hit`. + +```js +assert.match(getMonsterAttackValue.toString(), /console\.log\(\s*hit\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md new file mode 100644 index 00000000000..bcc2b14ee5a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md @@ -0,0 +1,338 @@ +--- +id: 62aa1e8ccd579330e097ce44 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +Functions run specific blocks of code when they are called, but they can also return a value. This value can be assigned to a variable and used elsewhere in your code. + +Use the `return` keyword to return the value of `hit` at the end of the function. + +# --hints-- + +You should use the `return` keyword to return the value of `hit`. + +```js +assert.match(getMonsterAttackValue, /return\s*hit/); +``` + +Your function should return the expected value. + +```js +xp = 0; +assert.equal(getMonsterAttackValue(1), 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md new file mode 100644 index 00000000000..725aa7e720a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md @@ -0,0 +1,350 @@ +--- +id: 62aa1eec891ed731db227a36 +title: Step 147 +challengeType: 0 +dashedName: step-147 +--- + +# --description-- + +If you play the game in its current state you might notice a bug. If your `xp` is high enough, the `getMonsterAttackValue` function will return a negative number, which will actually add to your total health when fighting a monster! + +In `getMonsterAttackValue`, change `return hit` to a ternary operator that returns `hit` if `hit` is greater than `0`, or returns `0` if it is not. + +Here is an example of returning a value based on `condition` with a ternary: + +```js +return condition ? true : false; +``` + +# --hints-- + +You should use a ternary to change the `return` value if `hit` is greater than `0`. + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0/); +``` + +You should use a ternary to return `hit` if `hit` is greater than `0` + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit/); +``` + +You should use a ternary to return `0` if `hit` is not greater than `0`. + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit\s*:\s*0/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit; +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md new file mode 100644 index 00000000000..97ce39a4821 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md @@ -0,0 +1,331 @@ +--- +id: 62aa1fed3d4e873366ff3131 +title: Step 148 +challengeType: 0 +dashedName: step-148 +--- + +# --description-- + +In your `attack` function, below the `health` variable create an `if` statement. Set the condition to call the `isMonsterHit` function. + +# --hints-- + +You should add an `if` statement which calls `isMonsterHit` in the condition. + +```js +assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\s*\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md new file mode 100644 index 00000000000..3e9df421573 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md @@ -0,0 +1,333 @@ +--- +id: 62aa204c1e1d33348ff09944 +title: Step 149 +challengeType: 0 +dashedName: step-149 +--- + +# --description-- + +Move your `monsterHealth` assignment into your `if` block. + +# --hints-- + +You should move your `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1` into your `if` block. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + + } + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md new file mode 100644 index 00000000000..88836e37794 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md @@ -0,0 +1,338 @@ +--- +id: 62aa20e9cf1be9358f5aceae +title: Step 150 +challengeType: 0 +dashedName: step-150 +--- + +# --description-- + +Add an `else` statement to your `if` statement. In the `else` statement, use the `+=` operator to add the text ` You miss.` to the end of `text.innerText`. + +# --hints-- + +You should add an `else` block after your `if (isMonsterHit())` block. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/) +``` + +You should add the text ` You miss.` to the end of `text.innerText`. Remember to use compound assignment. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md new file mode 100644 index 00000000000..7a5d427b22f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md @@ -0,0 +1,342 @@ +--- +id: 62aa2136fc49b836dfedb959 +title: Step 151 +challengeType: 0 +dashedName: step-151 +--- + +# --description-- + +Now create the `isMonsterHit` function. This will return a boolean value (true or false) to be used in your `if` statement. Return the result of the comparison `Math.random() > .2`. + +# --hints-- + +You should use the `function` keyword to declare `isMonsterHit`. + +```js +assert.match(code, /function\s+isMonsterHit/); +``` + +Your `isMonsterHit` function should return the result of the comparison `Math.random() > .2`. + +```js +assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md new file mode 100644 index 00000000000..2db80762083 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md @@ -0,0 +1,354 @@ +--- +id: 62aa21971e3b743844849985 +title: Step 152 +challengeType: 0 +dashedName: step-152 +--- + +# --description-- + +The player should hit if either `Math.random() > .2` **or** if the player's health is less than 20. At the end of your `return` statement, use the logical or operator `||` and check if `health` is less than `20`. + +The logical or operator will use the first value if it is truthy, otherwise it will use the second value. + +For example: `num < 10 || num > 20`. + +# --hints-- + +Your `isMonsterHit` function should use the logical or operator. + +```js +assert.match(isMonsterHit.toString(), /\|\|/); +``` + +Your logical or operator should use `health < 20` as the fallback value. + +```js +assert.match(isMonsterHit.toString(), /\|\|\s*health\s*<\s*20/); +``` + +Your function should return the result of the comparison `Math.random() > .2` **or** `health < 20`. + +```js +assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2\s*\|\|\s*health\s*<\s*20/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +--fcc-editable-region-- +function isMonsterHit() { + return Math.random() > .2; +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md new file mode 100644 index 00000000000..34820846dd6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md @@ -0,0 +1,346 @@ +--- +id: 62aa21ea8d9d9f396b95dd87 +title: Step 153 +challengeType: 0 +dashedName: step-153 +--- + +# --description-- + +On every attack, there should be a chance that the player's weapon breaks. At the end of the `attack` function, add an empty `if` expression with the condition `Math.random() <= .1`. + +# --hints-- + +You should add an `if` statement to your `attack` function. + +```js +const ifs = attack.toString().match(/if/g); +assert.lengthOf(ifs, 4); +``` + +Your new `if` statement should check `Math.random() <= .1`. + +```js +assert.match(attack.toString(), /if\s*\(\s*Math\.random\(\)\s*<=\s*0?\.1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md new file mode 100644 index 00000000000..4210b69f7a8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md @@ -0,0 +1,367 @@ +--- +id: 62aa226207f33d3ad4c6f546 +title: Step 154 +challengeType: 0 +dashedName: step-154 +--- + +# --description-- + +Use the `+=` operator to add ` Your [weapon] breaks.` to the end of `text.innerText`, replacing `weapon` with the last item in the `inventory` array. You can get this last item by using `inventory.pop()`, which will remove the last item in the array AND return it so it appears in your string. + +# --hints-- + +You should use the compound assignment operator to modify `text.innerText`. + +```js +const concat = attack.toString().match(/\+=/g); +assert.lengthOf(concat, 3); +``` + +You should use the `pop` method on the `inventory` array. + +```js +assert.match(attack.toString(), /inventory\.pop\(\)/); +``` + +You should add the string " Your " to `text.innerText`. Remember that spacing matters. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1/); +``` + +You should add the return value of `inventory.pop()` to the ` Your ` string. + +```js +console.log(attack.toString()); +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)/); +``` + +You should add ` breaks.` to the ` "Your " + inventory.pop()` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)\s*\+\s*('|")\sbreaks\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md new file mode 100644 index 00000000000..44980b592f0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md @@ -0,0 +1,350 @@ +--- +id: 62aa22aba186563bcbf2c395 +title: Step 155 +challengeType: 0 +dashedName: step-155 +--- + +# --description-- + +Remember that the increment operator `++` can be used to increase a variable's value by 1. There is also a decrement operator `--` that can be used to decrease a variable's value by 1. + +Decrement the value of `currentWeapon` in your `if` statement, after you update the text. + +# --hints-- + +You should use the decrement operator. + +```js +assert.match(attack.toString(), /--/); +``` + +You should decrement `currentWeapon` in your `if` statement. + +```js +assert.match(attack.toString(), /currentWeapon\s*--/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md new file mode 100644 index 00000000000..65fc9cd5576 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md @@ -0,0 +1,364 @@ +--- +id: 62aa234322d4ad3e8bce42cc +title: Step 156 +challengeType: 0 +dashedName: step-156 +--- + +# --description-- + +We don't want a player's only weapon to break. The logical or operator checks if two statements are true. + +Use the logical and operator `&&` to add a second condition to your `if` statement. The player's weapon should only break if `inventory.length` does not equal (`!==`) one. + +Here is an example of an `if` statement with two conditions: + +```js +if (firstName === "Quincy" && lastName === "Larson") { + +} +``` + +# --hints-- + +You should not modify your existing `if` statement. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1/); +``` + +You should use the logical and operator `&&`. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&/); +``` + +You should use the logical and operator to check if `inventory.length` does not equal `1`. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&\s*inventory\.length\s*\!\=\=\s*1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md new file mode 100644 index 00000000000..10cb8603022 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md @@ -0,0 +1,358 @@ +--- +id: 62aa2469c77b363fdb4f0e06 +title: Step 157 +challengeType: 0 +dashedName: step-157 +--- + +# --description-- + +Now you can add a small easter egg (hidden feature) to your game. + +Create a new function called `easterEgg` which calls the `update` function with `locations[7]` as the argument. + +# --hints-- + +You should use the `function` keyword to declare `easterEgg`. + +```js +assert.match(code, /function\s+easterEgg\s*/); +``` + +`easterEgg` should call the `update` function. + +```js +assert.match(easterEgg.toString(), /update\(/); +``` + +`easterEgg` should call the `update` function with `locations[7]` as the argument. + +```js +assert.match(easterEgg.toString(), /update\(\s*locations\[7\]\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md new file mode 100644 index 00000000000..a502101c334 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md @@ -0,0 +1,355 @@ +--- +id: 62aa252c3b1073415ba2b898 +title: Step 158 +challengeType: 0 +dashedName: step-158 +--- + +# --description-- + +Create an empty `pick` function with a parameter named `guess`. + +# --hints-- + +You should use the `function` keyword to declare `pick`. + +```js +assert.match(code, /function\s+pick\s*/); +``` + +`pick` should take a parameter named `guess`. + +```js +assert.match(pick.toString(), /pick\s*\(\s*guess\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } + +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md new file mode 100644 index 00000000000..5f657de3877 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md @@ -0,0 +1,384 @@ +--- +id: 62aa258da314ef42ba0a1858 +title: Step 159 +challengeType: 0 +dashedName: step-159 +--- + +# --description-- + +Create two new functions named `pickTwo` and `pickEight`. + +Inside each of those, call the `pick()` function and pass either `2` or `8` as the argument depending on the function name. + +# --hints-- + +You should use the `function` keyword to declare `pickTwo`. + +```js +assert.match(code, /function\s+pickTwo\s*/); +``` + +You should use the `function` keyword to declare `pickEight`. + +```js +assert.match(code, /function\s+pickEight\s*/); +``` + +`pickTwo` should call the `pick` function. + +```js +assert.match(pickTwo.toString(), /pick\(/); +``` + +`pickTwo` should call the `pick` function with `2` as the argument. + +```js +assert.match(pickTwo.toString(), /pick\(\s*2\s*\)/); +``` + +`pickEight` should call the `pick` function. + +```js +assert.match(pickEight.toString(), /pick\(/); +``` + +`pickEight` should call the `pick` function with `8` as the argument. + +```js +assert.match(pickEight.toString(), /pick\(\s*8\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function pick(guess) { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md new file mode 100644 index 00000000000..01f3692b24e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md @@ -0,0 +1,389 @@ +--- +id: 62aa25fcb5837d43b4d9873d +title: Step 160 +challengeType: 0 +dashedName: step-160 +--- + +# --description-- + +Add another object to your `locations` array. Set `name` to `easter egg`, set `button text` to an array with the strings `2`, `8`, and `Go to town square?`, set `button functions` to an array with the variables `pickTwo`, `pickEight`, and `goTown`, and `text` to `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`. + +# --hints-- + +Your `locations` array should have 8 values. + +```js +assert.lengthOf(locations, 8); +``` + +Your eighth `locations` value should be an object. + +```js +assert.isObject(locations[7]); +``` + +Your eighth `locations` value should have a `name` property with the value `easter egg`. + +```js +assert.equal(locations[7].name, "easter egg"); +``` + +Your eighth `locations` value should have a `button text` property with the value an array with the strings `2`, `8`, and `Go to town square?`. + +```js +assert.deepEqual(locations[7]["button text"], ["2", "8", "Go to town square?"]); +``` + +Your eighth `locations` value should have a `button functions` property with the value an array with the variables `pickTwo`, `pickEight`, and `goTown`. + +```js +assert.deepEqual(locations[7]["button functions"], [pickTwo, pickEight, goTown]); +``` + +Your eighth `locations` value should have a `text` property with the value `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`. + +```js +assert.equal(locations[7].text, "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" +--fcc-editable-region-- + } + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md new file mode 100644 index 00000000000..c335f2d7bc9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md @@ -0,0 +1,364 @@ +--- +id: 62aa2626c3c10244b94c787b +title: Step 161 +challengeType: 0 +dashedName: step-161 +--- + +# --description-- + +Inside `pick`, use `let` to initialize a variable named `numbers` and set it to an empty array. + +# --hints-- + +Your `pick` function should initalize `numbers` to an empty array `[]`. + +```js +assert.match(pick.toString(), /numbers\s*=\s*\[\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md new file mode 100644 index 00000000000..b043a04a1a5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md @@ -0,0 +1,381 @@ +--- +id: 62aa264d23cdaa45a20efada +title: Step 162 +challengeType: 0 +dashedName: step-162 +--- + +# --description-- + +After your `numbers` array, create a `while` loop. A while loop accepts a condition, and will run the code in the block until the condition is no longer true. + +Your `while` loop should run while `numbers.length` is less than `10`. + +Here is an example of a `while` loop that runs while `i` is less than five. + +```js +while (i < 5) { + +} +``` + +# --hints-- + +Your `pick` function should have a `while` loop. + +```js +assert.match(pick.toString(), /while\s*\(/); +``` + +Your `while` loop should run while `numbers.length < 10`. + +```js +assert.match(pick.toString(), /while\s*\(\s*numbers.length\s*<\s*10\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md new file mode 100644 index 00000000000..beace6c6228 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md @@ -0,0 +1,379 @@ +--- +id: 62aa26cca3cd3d46c431e73b +title: Step 163 +challengeType: 0 +dashedName: step-163 +--- + +# --description-- + +Inside your `while` loop, push a random number between 0 and 10 to the end of the `numbers` array. You can create this random number with `Math.floor(Math.random() * 11)`. + +# --hints-- + +You should use the `push` method to add a random number to the end of the `numbers` array. + +```js +assert.match(pick.toString(), /numbers\.push\(/); +``` + +You should use `Math.floor(Math.random() * 11)` to create the random number. + +```js +assert.match(pick.toString(), /Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)/); +``` + +You should `push` the result of `Math.floor(Math.random() * 11)` to the end of the `numbers` array. + +```js +assert.match(pick.toString(), /numbers\.push\(\s*Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md new file mode 100644 index 00000000000..ac85513b88f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md @@ -0,0 +1,380 @@ +--- +id: 62aa27227399d647e1c37a3c +title: Step 164 +challengeType: 0 +dashedName: step-164 +--- + +# --description-- + +After the `while` loop, set `text.innerText` to equal `You picked [guess]. Here are the random numbers:`. Replace `guess` with the player's guess. + +# --hints-- + +You should set `text.innerText` to the string `You picked `. Remember that spacing matters. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1/); +``` + +You should use the concatenation operator to add the value of the `guess` parameter to your `You picked ` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess/); +``` + +You should use the concatenation operator to add the string `. Here are the random numbers:` to your `"You picked " + guess` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md new file mode 100644 index 00000000000..3b20e162326 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md @@ -0,0 +1,368 @@ +--- +id: 62aa27560def7048d7b4a095 +title: Step 165 +challengeType: 0 +dashedName: step-165 +--- + +# --description-- + +Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line. + +# --hints-- + +You should add the new line escape character `\n` to your `. Here are the random numbers: ` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\\n\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:"; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md new file mode 100644 index 00000000000..180270940d6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md @@ -0,0 +1,375 @@ +--- +id: 62aa27c40ca6f04ab8be5fac +title: Step 166 +challengeType: 0 +dashedName: step-166 +--- + +# --description-- + +A `for` loop runs for a specific number of times. We will break down how a `for` loop runs in the next several steps. For now, copy this loop below and paste it at the end of your `pick` function. + +```js +for (let x = 1; x < 5; x++) { + +} +``` + +# --hints-- + +You should copy the above loop into your `pick` function. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*x\s*=\s*1\s*;\s*x\s*<\s*5\s*;\s*x\s*\+\+\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md new file mode 100644 index 00000000000..4b4af2f8669 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md @@ -0,0 +1,375 @@ +--- +id: 62aa28032d863d4bd8058799 +title: Step 167 +challengeType: 0 +dashedName: step-167 +--- + +# --description-- + +`for` loops are declared with three expressions separated by semicolons. `for (a; b; c)`, where `a` is the initialization expression, `b` is the condition, and `c` is the final expression. + +The initialization expression is executed only once, before the loop starts, and is often used to define and set up the loop variable. Think of it like declaring a counter to use in your loop. + +Many `for` loops use `i` as the counter and start from 0, so change `let x = 1;` to `let i = 0;`. + +# --hints-- + +You should change your initialization in the `for` loop to be `let i = 0;`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let x = 1; x < 5; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md new file mode 100644 index 00000000000..7067e31d3f3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md @@ -0,0 +1,373 @@ +--- +id: 62aa287434dc284cea01157c +title: Step 168 +challengeType: 0 +dashedName: step-168 +--- + +# --description-- + +The second statement in a `for` loop, the condition statement, is evaluated at the beginning of every loop iteration. The loop will continue as long as the condition evaluates to be true. + +We want the loop to run 10 times, so change `x < 5` to `i < 10`. + +# --hints-- + +You should update your condition statement to be `i < 10`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; x < 5; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md new file mode 100644 index 00000000000..72bbc1f15f8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md @@ -0,0 +1,373 @@ +--- +id: 62aa28bbd6323e4dfb3ac43e +title: Step 169 +challengeType: 0 +dashedName: step-169 +--- + +# --description-- + +The last statement in a `for` loop, the final expression, is executed at the end of each loop iteration. + +Since we changed the initialization statement to use `i` instead of `x`, change `x++` to `i++`. This will increment the initializer `i` by 1 after each loop. + +# --hints-- + +You should change your final expression to `i++`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;\s*i\+\+\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md new file mode 100644 index 00000000000..94da3ef415e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md @@ -0,0 +1,390 @@ +--- +id: 62aa28fb651bf14efa2dbb16 +title: Step 170 +challengeType: 0 +dashedName: step-170 +--- + +# --description-- + +Now you can write the logic to run in the loop. Inside your `for` loop, use the `+=` operator to add to the end of `text.innerText`. Add the number at index `i` of the `numbers` array, using `numbers[i]`. Then add a new line, using the escape sequence you used earlier. + +# --hints-- + +You should use compound assignment to add to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=/); +``` + +You should use bracket notation to access `numbers[i]`. + +```js +assert.match(pick.toString(), /numbers\[i\]/); +``` + +You should add `numbers[i]` to your `text.innerText` value. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]/); +``` + +You should add a new-line character after the `numbers[i]` value. Remember that you can do this with `\n`. + +```js +console.log(pick.toString()); +assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]\s*\+\s*('|")\\n\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md new file mode 100644 index 00000000000..b1540f1ac41 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md @@ -0,0 +1,387 @@ +--- +id: 62aa2943669c9d5026af6985 +title: Step 171 +challengeType: 0 +dashedName: step-171 +--- + +# --description-- + +The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +After your `for` loop, add an `if` expression to check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`. + +Here is an example of the `indexOf` syntax: + +```js +const numbers = [1, 2, 3]; +numbers.indexOf(2) // 1 +``` + +# --hints-- + +Your `pick` function should have an `if` statement. + +```js +assert.match(pick.toString(), /if/); +``` + +Your `if` statement should check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`. + +```js +assert.match(pick.toString(), /if\s*\(numbers\.indexOf\(\s*guess\s*\)\s*!==\s*-1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md new file mode 100644 index 00000000000..aa044de71f3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md @@ -0,0 +1,386 @@ +--- +id: 62aa2999ec27ec516655eba6 +title: Step 172 +challengeType: 0 +dashedName: step-172 +--- + +# --description-- + +Inside the `if` expression, add the string `Right! You win 20 gold!` to the end of `text.innerText`. Also, add `20` to the value of `gold` and update the `goldText.innerText`. + +# --hints-- + +You should use compound assignment to add the string `Right! You win 20 gold!` to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Right! You win 20 gold!\1/); +``` + +You should use compound assignment add `20` to the value of `gold`. + +```js +assert.match(pick.toString(), /gold\s*\+=\s*20/); +``` + +You should update the `goldText.innerText` to reflect the new value of `gold`. + +```js +assert.match(pick.toString(), /goldText\.innerText\s*\=\s*gold/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md new file mode 100644 index 00000000000..13ed8152080 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md @@ -0,0 +1,394 @@ +--- +id: 62aa29d8f8f88152c91350ca +title: Step 173 +challengeType: 0 +dashedName: step-173 +--- + +# --description-- + +Now add an `else` expression. Inside, add `Wrong! You lose 10 health!` to the end of `text.innerText`. Subtract `10` from `health` and update `healthText.innerText`. + +# --hints-- + +You should add an `else` block. + +```js +assert.match(pick.toString(), /else\s*\{/); +``` + +Your `else` block should use compound assignment to add `Wrong! You lose 10 health!` to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Wrong! You lose 10 health!\1/); +``` + +Your `else` block should use compound assignment to subtract `10` from `health`. + +```js +assert.match(pick.toString(), /health\s*-=\s*10/); +``` + +Your `else` block should update the `healthText.innerText` to reflect the new value of `health`. + +```js +assert.match(pick.toString(), /healthText\.innerText\s*=\s*health/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md new file mode 100644 index 00000000000..5f48991b690 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md @@ -0,0 +1,394 @@ +--- +id: 62aa2aec2f09d454253aad6c +title: Step 174 +challengeType: 0 +dashedName: step-174 +--- + +# --description-- + +Since you subtracted health from the player, you need to check `if` the player's `health` is less than or equal to `0`. If it is, call the `lose` function. + +# --hints-- + +Your `pick` function should have a second `if` statement. + +```js +const match = pick.toString().match(/if/g); +assert.isAtLeast(match.length, 2); +``` + +Your `if` statement should check if the player's `health` is less than or equal to `0`. + +```js +assert.match(pick.toString(), /if\s*\(\s*health\s*<=\s*0\s*\)/); +``` + +Your `if` statement should call the `lose` function. + +```js +assert.match(pick.toString(), /lose\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md new file mode 100644 index 00000000000..f9bcbbb6387 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md @@ -0,0 +1,746 @@ +--- +id: 62aa2ba9cd881355a6f0a5a8 +title: Step 175 +challengeType: 0 +dashedName: step-175 +--- + +# --description-- + +Looking at your `kill monster` object, `button functions` currently has three `goTown` variables. Replace the third one with `easterEgg` - this is how a player will access the hidden feature of the game. Do not change the `button text`. + +With this, your RPG game is complete! You can now play around - can you defeat the dragon? + +# --hints-- + +You should update your fifth `locations` object to have a `button functions` property of `[goTown, goTown, easterEgg]`. + +```js +assert.deepEqual(locations[4]["button functions"], [goTown, goTown, easterEgg]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, +--fcc-editable-region-- + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + if (health <= 0) { + lose(); + } + } +} +``` + +# --solutions-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, easterEgg], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + if (health <= 0) { + lose(); + } + } +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md new file mode 100644 index 00000000000..d98f9e81298 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md @@ -0,0 +1,121 @@ +--- +id: 62b46e3a8d4be31be5af793d +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +We have run in to a slight problem. You are trying to query your page for a button element, but your `script` tag is in the `head` of your HTML. This means your code runs before the browser has finished reading the HTML, and your `document.querySelector()` will not see the button - because the browser hasn't processed it yet. + +To fix this, move your `script` element out of the `head` element, and place it at the end of your `body` element (just before the closing `` tag.) + +# --hints-- + +Your `script` element should not be in your `head` element. + +```js +const script = document.querySelector('script[data-src$="script.js"]'); +assert.notEqual(script.parentElement.tagName, "HEAD"); +``` + +Your `script` element should come at the end of your `body` element. + +```js +const script = document.querySelector('script[data-src$="script.js"]'); +assert.equal(script.previousElementSibling.tagName, "DIV"); +assert.isNull(script.nextElementSibling); +assert.equal(script.parentElement.tagName, "BODY"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +--fcc-editable-region-- + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +let button1 = document.querySelector("#button1"); +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md new file mode 100644 index 00000000000..e5d8098b79a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md @@ -0,0 +1,339 @@ +--- +id: 62ba17beef16c563069a65d8 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +In the `locations` array, add another object at the end. Set the `name` property to `lose`, set `button text` to an array with three `REPLAY?` strings, set `button functions` to an array with three `restart` variables, and set `text` to `You die. ☠️`. You can copy that text to use the emote. + +# --hints-- + +You should have six values in the `locations` array. + +```js +assert.lengthOf(locations, 6); +``` + +Your sixth `locations` value should be an object. + +```js +assert.isObject(locations[5]); +``` + +Your sixth `locations` value should have a `name` property with the value `lose`. + +```js +assert.equal(locations[5].name, 'lose'); +``` + +Your sixth `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings. + +```js +assert.deepEqual(locations[5]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']); +``` + +Your sixth `locations` value should have a `button functions` property with the value an array with three `restart` variables. + +```js +assert.deepEqual(locations[5]["button functions"], [restart, restart, restart]); +``` + +Your sixth `locations` value should have a `text` property with the value `You die. ☠️`. + +```js +assert.equal(locations[5].text, 'You die. ☠️'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md new file mode 100644 index 00000000000..50b06ed7911 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md @@ -0,0 +1,114 @@ +--- +id: 62fc1ee0c5a89717d4785729 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give your `#monsterStats` element the same `border` and `padding` as your `#stats` element. Set its color to `white` and give it a `red` background. + +# --hints-- + +You should have a `#monsterStats` selector. + +```js +const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats'); +assert.exists(monsterStats); +``` + +Your `#monsterStats` selector should have a `border` of `1px solid black`. + +```js +const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +Your `#monsterStats` selector should have `5px` of padding. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +Your `#monsterStats` selector should have a `color` of `white`. + +```js +const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +Your `#monsterStats` selector should have a `background-color` of `red`. + +```js +const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color'); +assert.equal(background, 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md new file mode 100644 index 00000000000..1b122cb50c8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md @@ -0,0 +1,127 @@ +--- +id: 62fc20387ef88d1d1998aac5 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Use `querySelector()` to get the other two button elements, using their `#button2` and `#button3` `id`s. Store them in variables called `button2` and `button3`. Remember to use `const`. + +# --hints-- + +You should declare a `button2` variable with `const`. + +```js +assert.match(code, /const button2/); +``` + +Your `button2` variable should have the value of your `#button2` element. + +```js +assert.deepEqual(button2, document.querySelector('#button2')); +``` + +You should declare a `button3` variable with `const`. + +```js +assert.match(code, /const button3/); +``` + +Your `button3` variable should have the value of your `#button3` element. + +```js +assert.deepEqual(button3, document.querySelector('#button3')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md new file mode 100644 index 00000000000..5dd815b61c0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md @@ -0,0 +1,123 @@ +--- +id: 62fc211760bfc220f4734800 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Finally, use `querySelector()` to get the `#monsterHealth` element. Because you have already declared a `monsterHealth` variable earlier, you need to use a different variable name for this element. Declare a new variable with the `const` keyword and name it `monsterHealthText`. + +# --hints-- + +You should declare a `monsterHealthText` variable with `const`. + +```js +assert.match(code, /const monsterHealthText/); +``` + +Your `monsterHealthText` variable should have the value of your `#monsterHealth` element. + +```js +assert.deepEqual(monsterHealthText, document.querySelector('#monsterHealth')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md new file mode 100644 index 00000000000..a2ce162457c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md @@ -0,0 +1,100 @@ +--- +id: 5ddb965c65d27e1512d44d9a +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. + +In JavaScript, you can access the DOM by referencing the global `document` object. + +To view the DOM, log it to the console with `console.log(document)`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast
+ Lunch
+ Dinner +
+ + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md new file mode 100644 index 00000000000..aab244748d6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md @@ -0,0 +1,114 @@ +--- +id: 5ddb965c65d27e1512d44d9b +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +In our HTML document, we have a form element with an `id` attribute: `
` + +To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. + +The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+ +

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + + +
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md new file mode 100644 index 00000000000..31afd7303fc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md @@ -0,0 +1,119 @@ +--- +id: 5ddb965c65d27e1512d44d9c +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. + +Forms have an `onsubmit` event that can execute a function when the form is submitted. + +For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. + +Assign a function named `calculate` to the `onsubmit` event of your form. + +You will create the `calculate` function later. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md new file mode 100644 index 00000000000..bcd3b1bc287 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md @@ -0,0 +1,112 @@ +--- +id: 5ddb965c65d27e1512d44d9d +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: + +```js +function square() {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(typeof calculate === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md new file mode 100644 index 00000000000..8a02a67b570 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md @@ -0,0 +1,115 @@ +--- +id: 5ddb965c65d27e1512d44d9e +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. + +Here is an example of an empty function called `square` that takes a `number` as a parameter: + +```js +function square(number) {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md new file mode 100644 index 00000000000..0cd5d1525fd --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md @@ -0,0 +1,113 @@ +--- +id: 5ddb965c65d27e1512d44d9f +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. + +Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md new file mode 100644 index 00000000000..ee8e8356f0d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md @@ -0,0 +1,122 @@ +--- +id: 5ddb965c65d27e1512d44da0 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. + +To access elements with a certain class name, we use the `getElementsByClassName()` method. + +Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md new file mode 100644 index 00000000000..9b80e0f827c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md @@ -0,0 +1,119 @@ +--- +id: 5ddb965c65d27e1512d44da1 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md new file mode 100644 index 00000000000..c5a2856f2c3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md @@ -0,0 +1,121 @@ +--- +id: 5ddb965c65d27e1512d44da2 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md new file mode 100644 index 00000000000..40f6a846fd5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md @@ -0,0 +1,116 @@ +--- +id: 5ddb965c65d27e1512d44da3 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. + +# --hints-- + +See description above for instructions. + +```js +assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md new file mode 100644 index 00000000000..725bff25987 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md @@ -0,0 +1,117 @@ +--- +id: 5ddb965c65d27e1512d44da4 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md new file mode 100644 index 00000000000..fead88a0598 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md @@ -0,0 +1,129 @@ +--- +id: 5ddb965c65d27e1512d44da5 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. + +The `map()` method allows us to do exactly that. + +Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .toString() + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md new file mode 100644 index 00000000000..714497fddbb --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md @@ -0,0 +1,127 @@ +--- +id: 5ddb965c65d27e1512d44da6 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Now we need to provide a function to `map()` that will be performed on each item of the array. + +This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: + +```js +function(meal){} +``` + +Enter in the above function as an argument in between the parentheses of the `.map()` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md new file mode 100644 index 00000000000..7d58167b80c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md @@ -0,0 +1,125 @@ +--- +id: 5ddb965c65d27e1512d44da7 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. + +If you want, console log `total` to see what results you are getting. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md new file mode 100644 index 00000000000..4a199951818 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md @@ -0,0 +1,123 @@ +--- +id: 5ddb965c65d27e1512d44da8 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md new file mode 100644 index 00000000000..6058cea614a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md @@ -0,0 +1,122 @@ +--- +id: 5ddb965c65d27e1512d44da9 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md new file mode 100644 index 00000000000..46dfade8b55 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md @@ -0,0 +1,123 @@ +--- +id: 5ddb965c65d27e1512d44daa +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. + +Chain the `reduce()` method to the `Array.from()` expression. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md new file mode 100644 index 00000000000..065b5dce513 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md @@ -0,0 +1,139 @@ +--- +id: 5ddb965c65d27e1512d44dab +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: + +```js +function(accumulator, currentValue) { /* code to run */ } +``` + +or using arrow functions: + +```js +(accumulator, currentValue) => { /* code to run */ } +``` + +Insert the above callback function as an argument in the `.reduce()` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md new file mode 100644 index 00000000000..448c7702610 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md @@ -0,0 +1,139 @@ +--- +id: 5ddb965c65d27e1512d44dac +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. + +Here is an example of a `reduce()` method with an empty object as its initial value: + +```js +arr.reduce((accumulator, currentValue) => { + /* code to run */ +}, {}); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md new file mode 100644 index 00000000000..4134f0401a2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md @@ -0,0 +1,147 @@ +--- +id: 5ddb965c65d27e1512d44dad +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. + +We can use the reduce function as follows: + +```js +arr.reduce((accumulator, currentValue) => { + return accumulator + currentValue; +}, 0); +``` + +At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. + +At `arr[1]`, the function is `(1, 3) => 1 + 3`, + +Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. + +In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md new file mode 100644 index 00000000000..c9d4f5bd8ad --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md @@ -0,0 +1,136 @@ +--- +id: 5e302e80e003129199103c78 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` + +You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. + +When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md new file mode 100644 index 00000000000..b36ed2d97b6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md @@ -0,0 +1,139 @@ +--- +id: 5e302e8ce003129199103c79 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Now let's simplify the `reduce()` callback function by refactoring it. + +Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. + +So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. + +Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md new file mode 100644 index 00000000000..8825fbe6dd0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md @@ -0,0 +1,133 @@ +--- +id: 5ddb965c65d27e1512d44dae +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. + +Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. + +If you inspect the Female radio button you will notice its id: `` + +Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md new file mode 100644 index 00000000000..1e19c715fcf --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md @@ -0,0 +1,131 @@ +--- +id: 5ddb965c65d27e1512d44daf +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` + +Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md new file mode 100644 index 00000000000..21d83417535 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md @@ -0,0 +1,141 @@ +--- +id: 5ddb965c65d27e1512d44db0 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. + +For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: + +```js +if (5 - 3 === 4) { + return 'Yes'; +} else { + return 'No'; +} +``` + +`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md new file mode 100644 index 00000000000..abe960e3120 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md @@ -0,0 +1,129 @@ +--- +id: 5ddb965c65d27e1512d44db1 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now that we have `total` and `maxCalories`, we need to find out the difference between them. + +Create a variable named `difference` and set it equal to `total - maxCalories` + +# --hints-- + +See description above for instructions. + +```js +assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md new file mode 100644 index 00000000000..ad3abc0bfe5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md @@ -0,0 +1,141 @@ +--- +id: 5ddb965c65d27e1512d44db2 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. + +To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). + +If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. + +Use the same ternary syntax that you used to determine `maxCalories`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md new file mode 100644 index 00000000000..2dbdd8b547b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md @@ -0,0 +1,143 @@ +--- +id: 5ddb965c65d27e1512d44db3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
`. + +We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. + +Create a variable named `output` and set it equal to this division element with the `id` of `output`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md new file mode 100644 index 00000000000..87062f28e7f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db4 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Now it's time to create the HTML elements that we will add inside of `output`. + +To create an element, use `createElement()`. For example: + +```js +const myHeading1 = document.createElement('h1') +``` + +Create an `h3` element and assign it to a variable named `result`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md new file mode 100644 index 00000000000..90ad3c91cb4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md @@ -0,0 +1,154 @@ +--- +id: 5ddb965c65d27e1512d44db5 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Next, we will create a text node that we will later append to the `result` element. + +JavaScript has a function called `createTextNode()` to accomplish this. For example: + +```js +const myText = document.createTextNode("Hello world!") +``` + +Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md new file mode 100644 index 00000000000..b93248efe69 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db6 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +We can now use the `difference` variable that we created above. + +Insert the `difference` variable inside the parentheses of `.createTextNode()` + +If you want to see what the text currently looks like, try `console.log(resultText)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md new file mode 100644 index 00000000000..fd08248b5f0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db7 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Notice how if `total` is less than `maxCalories`, `difference` is a negative number. + +We want to show the absolute value of the difference so it displays "300" rather than "-300". + +Wrap the `difference` in a `Math.abs()` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md new file mode 100644 index 00000000000..f066a2b3607 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md @@ -0,0 +1,149 @@ +--- +id: 5ddb965c65d27e1512d44db8 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md new file mode 100644 index 00000000000..d2e8c9a31c3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md @@ -0,0 +1,153 @@ +--- +id: 5ddb965c65d27e1512d44db9 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next we want to add the text from the `surplusOrDeficit` variable that we previously created. + +Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md new file mode 100644 index 00000000000..1311c2ac849 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md @@ -0,0 +1,161 @@ +--- +id: 5ddb965c65d27e1512d44dba +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. + +Some people consider this a little cumbersome and prefer to use template literals instead. + +Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. + +For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. + +Convert the data inside of `createTextNode()` to be a template literal. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md new file mode 100644 index 00000000000..923d7d02e23 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md @@ -0,0 +1,153 @@ +--- +id: 5ddb965c65d27e1512d44dbb +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: + +```js +result.appendChild(resultText); +``` + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md new file mode 100644 index 00000000000..09da32b6cb5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md @@ -0,0 +1,154 @@ +--- +id: 5ddb965c65d27e1512d44dbc +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Similarly, append the `result` to the `output` element with the `appendChild()` method. + +Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md new file mode 100644 index 00000000000..ccb8660bf13 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md @@ -0,0 +1,159 @@ +--- +id: 5ddb965c65d27e1512d44dbd +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Next, let's create and add a horizontal rule (`hr`) element to the output. + +Create an `hr` element and assign it to a variable named `line`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md new file mode 100644 index 00000000000..e0f9bd9c47c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md @@ -0,0 +1,158 @@ +--- +id: 5ddb965c65d27e1512d44dbe +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add the `line` to the `output` element using the `appendChild()` method. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md new file mode 100644 index 00000000000..4c4b069fb43 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md @@ -0,0 +1,167 @@ +--- +id: 5ddb965c65d27e1512d44dbf +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Let's create a few more HTML elements to add to the `output`. + +Create an `h4` element and assign it to a variable named `recommended`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md new file mode 100644 index 00000000000..0becd375fa5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md @@ -0,0 +1,170 @@ +--- +id: 5ddb965c65d27e1512d44dc0 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Create a text node and assign it to a variable named `recommendedText`. + +This is similar to how your created the `resultText` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md new file mode 100644 index 00000000000..fd2d846ab52 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md @@ -0,0 +1,175 @@ +--- +id: 5ddb965c65d27e1512d44dc1 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. + +Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". + +This is similar to template literal syntax previously used to create `resultText`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md new file mode 100644 index 00000000000..9e9d9c9c3f2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md @@ -0,0 +1,175 @@ +--- +id: 5ddb965c65d27e1512d44dc2 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Append the `recommendedText` node to the `recommended` element. + +This is similar to how the `resultText` is appended to `result` previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md new file mode 100644 index 00000000000..9264e8ac9cf --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md @@ -0,0 +1,174 @@ +--- +id: 5ddb965c65d27e1512d44dc3 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Append the `recommended` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md new file mode 100644 index 00000000000..0fd8978f093 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5ddb965c65d27e1512d44dc4 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. + +Create an `h4` element and assign it to a variable named `consumed`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md new file mode 100644 index 00000000000..6bb2536f422 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md @@ -0,0 +1,192 @@ +--- +id: 5ddb965c65d27e1512d44dc5 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. + +For example: + +```js +consumed.innerHTML = `Hello world`; +``` + +Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md new file mode 100644 index 00000000000..29d043f4c6e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md @@ -0,0 +1,182 @@ +--- +id: 5ddb965c65d27e1512d44dc6 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Append the `consumed` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md new file mode 100644 index 00000000000..c34dcad8f68 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5ddb965c65d27e1512d44dc7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Now it's time to add some styling which can be added directly as attributes or classes. + +In our CSS file, we have a styling rule for any elements with the class name `green-text`. + +On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. + +Now if you submit the form again and inspect the `result` element, you will see it as `

` and notice that the text is now green. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md new file mode 100644 index 00000000000..7298971ffec --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5ddb965c65d27e1512d44dc8 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. + +For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. + +Set the `class` attribute of the `output` element equal to a class named `bordered-class`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md new file mode 100644 index 00000000000..1b0bd348910 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md @@ -0,0 +1,199 @@ +--- +id: 5ddb965c65d27e1512d44dc9 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. + +Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. + +The `calculate()` function is now finished! + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md new file mode 100644 index 00000000000..56bbb142804 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md @@ -0,0 +1,206 @@ +--- +id: 5ddb965c65d27e1512d44dca +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. + +In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: + +```html + + + + +
+

+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md new file mode 100644 index 00000000000..db8f9bc95c1 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5ddb965c65d27e1512d44dcb +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +We want a function to run every time the user clicks the "Add Entry" button. + +Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: + +```js +function() {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md new file mode 100644 index 00000000000..886f041422c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md @@ -0,0 +1,203 @@ +--- +id: 5ddb965c65d27e1512d44dcc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Inside the function, create an `input` document element and assign it to a variable named `foodInput`. + +This is similar to how you created the `result` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md new file mode 100644 index 00000000000..6860d68731d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md @@ -0,0 +1,204 @@ +--- +id: 5ddb965c65d27e1512d44dcd +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Set the `placeholder` property of the `foodInput` equal to `'food name'`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md new file mode 100644 index 00000000000..89e37a9f626 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md @@ -0,0 +1,210 @@ +--- +id: 5ddb965c65d27e1512d44dce +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. + +In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. + +Add the class name `food-control` to the `foodInput` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md new file mode 100644 index 00000000000..e0ab30e27b5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md @@ -0,0 +1,214 @@ +--- +id: 5ddb965c65d27e1512d44dcf +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Notice that parent container of all of the inputs has an `id` of `entries`: `
`. + +Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. + +This is similar to the other `appendChild()` methods that you have used previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md new file mode 100644 index 00000000000..ea1faf6c59c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md @@ -0,0 +1,211 @@ +--- +id: 5ddb965c65d27e1512d44dd0 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md new file mode 100644 index 00000000000..594af428356 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md @@ -0,0 +1,218 @@ +--- +id: 5ddb965c65d27e1512d44dd1 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. + +This is similar to how to set the class of the `output` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md new file mode 100644 index 00000000000..962a0309894 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md @@ -0,0 +1,220 @@ +--- +id: 5ddb965c65d27e1512d44dd2 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +The `calorieInput` element should only accept numbers that are 0 or above. + +Set the `min` attribute of `calorieInput` to `0`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md new file mode 100644 index 00000000000..eac60b49fce --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md @@ -0,0 +1,220 @@ +--- +id: 5ddb965c65d27e1512d44dd3 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. + +We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md new file mode 100644 index 00000000000..7ffb7021744 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md @@ -0,0 +1,222 @@ +--- +id: 5ddb965c65d27e1512d44dd4 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. + +To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md new file mode 100644 index 00000000000..8e15285d2a9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md @@ -0,0 +1,226 @@ +--- +id: 5ddb965c65d27e1512d44dd5 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. + +The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md new file mode 100644 index 00000000000..df36314c4ae --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md @@ -0,0 +1,230 @@ +--- +id: 5ddb965c65d27e1512d44dd6 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. + +Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md new file mode 100644 index 00000000000..1e5b3e9b048 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md @@ -0,0 +1,226 @@ +--- +id: 5ddb965c65d27e1512d44dd7 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. + +# --hints-- + +See description above for instructions. + +```js +assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md new file mode 100644 index 00000000000..7a941b6559c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md @@ -0,0 +1,238 @@ +--- +id: 5ddb965c65d27e1512d44dd8 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Create a variable named `clearOutput` and set it equal to a blank arrow function: + +```js +const clearOutput = () => {} +``` + +This is similar to `function clearOutput () {}`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof clearOutput === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md new file mode 100644 index 00000000000..e6a2d2c6337 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md @@ -0,0 +1,243 @@ +--- +id: 5ddb965c65d27e1512d44dd9 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +We need to remove the contents inside of element with the `id` of `output`. + +In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md new file mode 100644 index 00000000000..f8984120835 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md @@ -0,0 +1,250 @@ +--- +id: 5ddb965c65d27e1512d44dda +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. + +Remove the `bordered-class` class. For example: + +```js +document.getElementById('my-div').classList.remove('my-class') +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md new file mode 100644 index 00000000000..93a258c395b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md @@ -0,0 +1,243 @@ +--- +id: 5ddb965c65d27e1512d44ddb +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. + +In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/clearOutput\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md new file mode 100644 index 00000000000..6a07e9aa83b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md @@ -0,0 +1,244 @@ +--- +id: 5ddb965c65d27e1512d44ddc +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof clearForm === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md new file mode 100644 index 00000000000..88284a00280 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md @@ -0,0 +1,259 @@ +--- +id: 5ddb965c65d27e1512d44ddd +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. + +Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. + +This is similar to how you declared the `total` variable previously in the `calculate` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md new file mode 100644 index 00000000000..9cc201d5194 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md @@ -0,0 +1,257 @@ +--- +id: 5ddb965c65d27e1512d44dde +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. + +Add `foodInputs.forEach()`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md new file mode 100644 index 00000000000..8044dac1e60 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md @@ -0,0 +1,263 @@ +--- +id: 5ddb965c65d27e1512d44ddf +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +We need to provide a callback function in the parentheses of `forEach()`. + +This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. + +In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md new file mode 100644 index 00000000000..dd34b193b4c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md @@ -0,0 +1,271 @@ +--- +id: 5ddb965c65d27e1512d44de0 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. + +Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. + +This is similar to how you declared the `foodInputs` variable previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md new file mode 100644 index 00000000000..652c8f99281 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md @@ -0,0 +1,269 @@ +--- +id: 5ddb965c65d27e1512d44de1 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md new file mode 100644 index 00000000000..b3cf00545fa --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md @@ -0,0 +1,277 @@ +--- +id: 5ddb965c65d27e1512d44de2 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. + +Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md new file mode 100644 index 00000000000..ead4dfe0e77 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md @@ -0,0 +1,185 @@ +--- +id: 5ddb965c65d27e1512d44de3 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Congratulations! Have fun playing with your completed calorie counter. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md new file mode 100644 index 00000000000..08bc2a4aa43 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md @@ -0,0 +1,78 @@ +--- +id: 5d79253297c0ebb149ea9fed +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +In functional programming, we prefer immutable values over mutable values. + +Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. + +Start by creating an empty `infixToFunction` object using `const`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md new file mode 100644 index 00000000000..3159f1d2410 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md @@ -0,0 +1,80 @@ +--- +id: 5d7925323be8848dbc58a07a +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md new file mode 100644 index 00000000000..c5dbbab705c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md @@ -0,0 +1,84 @@ +--- +id: 5d792532f631702ae6d23e11 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Now return the sum of `x` and `y` using the `return` keyword. + +# --hints-- + +See description above for instructions. + +```js +assert(add(1, 2) === 3 && add(100, 2000) === 2100); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md new file mode 100644 index 00000000000..0a9d327d798 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md @@ -0,0 +1,88 @@ +--- +id: 5d7925329445167ecc2ac9c9 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. + +Assign `add` to a new variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md new file mode 100644 index 00000000000..4e85d64fbe2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md @@ -0,0 +1,94 @@ +--- +id: 5d792532b07918c3a5904913 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: + +```js +function(x) { + return x +} +``` + +First, remove the `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md new file mode 100644 index 00000000000..a9aa387addd --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md @@ -0,0 +1,94 @@ +--- +id: 5d792533cc8b18b6c133edc7 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: + +```js +const fn = function(x) { + return x; +} + +fn(); +``` + +Assign the anonymous function to the variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md new file mode 100644 index 00000000000..68c44b16619 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md @@ -0,0 +1,90 @@ +--- +id: 5d7925337954ed57a565a135 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. + +Rewrite `addVar` using ES6's arrow syntax: + +```js +const fn = (x, y) => x; +``` + +Note that the value is returned implicitly. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md new file mode 100644 index 00000000000..676f6c6f4ff --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md @@ -0,0 +1,82 @@ +--- +id: 5d79253352e33dd59ec2f6de +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Add the key `+` to `infixToFunction` and assign it the value `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(infixToFunction['+'].toString() === addVar.toString()); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md new file mode 100644 index 00000000000..c44846417a5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md @@ -0,0 +1,84 @@ +--- +id: 5d792533d31e4f7fad33011d +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md new file mode 100644 index 00000000000..2096072d738 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md @@ -0,0 +1,82 @@ +--- +id: 5d792533e7707b9645d7b540 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Remove the now redundant `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof addVar === 'undefined'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md new file mode 100644 index 00000000000..526e706eb08 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md @@ -0,0 +1,87 @@ +--- +id: 5d79253378595ec568f70ab6 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Add similar definitions for `-`, `*` and `/` in `infixToFunction`. + +# --hints-- + +See description above for instructions. + +```js +assert( + infixToFunction['-'](10, 2) === 8 && + infixToFunction['*'](10, 10) === 100 && + infixToFunction['/'](100, 10) === 10 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md new file mode 100644 index 00000000000..37432637ac6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md @@ -0,0 +1,92 @@ +--- +id: 5d7925330918ae4a2f282e7e +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md new file mode 100644 index 00000000000..3d09b3967f2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md @@ -0,0 +1,98 @@ +--- +id: 5d792533ed00e75d129e1b18 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). + +Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. + +This is how you would pass the `-` function: + +```js +str.replace(regex, infixToFunction["-"]) +``` + +# --hints-- + +See description above for instructions. + +```js +assert(infixEval('ab', /(a)b/) === 'aba'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md new file mode 100644 index 00000000000..0926459ef14 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md @@ -0,0 +1,97 @@ +--- +id: 5d792533a5c42fb4d1a4b70d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md new file mode 100644 index 00000000000..23968d2e070 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md @@ -0,0 +1,102 @@ +--- +id: 5d79253358e8f646cbeb2bb0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Change the `"+"` in the call to `infixToFunction` to `fn`. + +`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md new file mode 100644 index 00000000000..f3dd1211e6a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md @@ -0,0 +1,104 @@ +--- +id: 5d792533bb38fab70b27f527 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". + +Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). + +# --hints-- + +See description above for instructions. + +```js +const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; +assert( + infixEval('23+35', regex) === '58' && + infixEval('100-20', regex) === '80' && + infixEval('10*10', regex) === '100' && + infixEval('120/6', regex) === '20' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md new file mode 100644 index 00000000000..e295114e777 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md @@ -0,0 +1,100 @@ +--- +id: 5d79253386060ed9eb04a070 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. + +To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. + +Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md new file mode 100644 index 00000000000..1af15a10b8e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md @@ -0,0 +1,103 @@ +--- +id: 5d792533717672657b81aa69 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +When defining an arrow function with a single argument, the parentheses can be omitted: + +```js +const greeting = name => `Hello !`; +``` + +Define a function `highPrecedence` which takes a single argument `str` and returns it. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('a') === 'a'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md new file mode 100644 index 00000000000..5c2d8560932 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md @@ -0,0 +1,110 @@ +--- +id: 5d7925335ab63018dcec11fe +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Arrow functions can have multiple statements: + +```js +const fn = (x, y) => { + const result = x + y; + return result; // explicit return statement required +}; +``` + +Use this syntax for the `highPrecedence` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md new file mode 100644 index 00000000000..1ddd40ce5d8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md @@ -0,0 +1,105 @@ +--- +id: 5d7925330f300c342315066d +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md new file mode 100644 index 00000000000..3bfba3454a9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md @@ -0,0 +1,107 @@ +--- +id: 5d792533aa6443215c9b16bf +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md new file mode 100644 index 00000000000..333b8bcb122 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md @@ -0,0 +1,120 @@ +--- +id: 5d7925334c5e22586dd72962 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The ternary operator has the following syntax: + +```js +const result = condition ? valueIfTrue : valueIfFalse; +const result = 1 === 1 ? 1 : 0; // 1 +const result = 9 > 10 ? "Yes" : "No"; // "No" +``` + +Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2') === '' && + highPrecedence('2+2') === '2+2' && + code.includes('?') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md new file mode 100644 index 00000000000..c5f666b8a05 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md @@ -0,0 +1,114 @@ +--- +id: 5d79253307ecd49e030bdcd1 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. + +Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2*2') === '8' && + highPrecedence('2*2') === '4' && + highPrecedence('2+2') === '2+2' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md new file mode 100644 index 00000000000..c837d8e94e1 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md @@ -0,0 +1,112 @@ +--- +id: 5d792534257122211d3043af +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. + +# --hints-- + +See description above for instructions. + +```js +assert(spreadsheetFunctions['']('x') === 'x'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md new file mode 100644 index 00000000000..58109dce7a4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md @@ -0,0 +1,120 @@ +--- +id: 5d7925346f4f2da6df4354a6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md new file mode 100644 index 00000000000..313db4427d6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md @@ -0,0 +1,128 @@ +--- +id: 5d792534cac2dbe0a719ea7a +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set `noHigh` to `highPrecedence(str)` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md new file mode 100644 index 00000000000..bc94c78c155 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md @@ -0,0 +1,131 @@ +--- +id: 5d792534857332d07ccba3ad +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md new file mode 100644 index 00000000000..7972802a8b8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md @@ -0,0 +1,133 @@ +--- +id: 5d792534d586ef495ea9df90 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Set `str2` to `infixEval(noHigh, infix)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md new file mode 100644 index 00000000000..f957c47d628 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md @@ -0,0 +1,134 @@ +--- +id: 5d79253410532e13d13fe574 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + applyFn + .toString() + .replace(/\s/g, '') + .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md new file mode 100644 index 00000000000..42b80301fc6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md @@ -0,0 +1,138 @@ +--- +id: 5d7925342415527083bd6667 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: + +```js +"a b c".split(" "); // ["a", "b", "c"]; +``` + +Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md new file mode 100644 index 00000000000..33e85a097cc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md @@ -0,0 +1,142 @@ +--- +id: 5d792534c3d26890ac1484d4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: + +```js +[1, 2, 3].map(x => x + 1); // [2, 3, 4] +``` + +In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md new file mode 100644 index 00000000000..abb91060f5e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md @@ -0,0 +1,139 @@ +--- +id: 5d792534b92f3d1cd4410ce3 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md new file mode 100644 index 00000000000..bb2f8da03a5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md @@ -0,0 +1,140 @@ +--- +id: 5d7925341193948dfe6d76b4 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md new file mode 100644 index 00000000000..f32c582d3ef --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md @@ -0,0 +1,141 @@ +--- +id: 5d792534cf81365cfca58794 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md new file mode 100644 index 00000000000..a460b595da1 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md @@ -0,0 +1,139 @@ +--- +id: 5d7925348ee084278ff15556 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. + +Now return `str2.replace(regex, "")` at the end of `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md new file mode 100644 index 00000000000..45e848ecbeb --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md @@ -0,0 +1,142 @@ +--- +id: 5d7925348a6a41c32f7a4e3e +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md new file mode 100644 index 00000000000..7394c7c6472 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md @@ -0,0 +1,150 @@ +--- +id: 5d792534408c5be896b0a46e +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. + +Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md new file mode 100644 index 00000000000..c86fe809104 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md @@ -0,0 +1,146 @@ +--- +id: 5d792534f0eda837510e9192 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md new file mode 100644 index 00000000000..bfa91d4503f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md @@ -0,0 +1,150 @@ +--- +id: 5d7925346b911fce161febaf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md new file mode 100644 index 00000000000..24d94216931 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md @@ -0,0 +1,158 @@ +--- +id: 5d79253483eada4dd69258eb +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +`range` should set `arr` to `[start]` and should then return `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constarr=[start]') && + JSON.stringify(range(1)) === '[1]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md new file mode 100644 index 00000000000..4307ef2889a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md @@ -0,0 +1,157 @@ +--- +id: 5d7925342b2b993ef18cd45f +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md new file mode 100644 index 00000000000..0fa8e6fe0fb --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md @@ -0,0 +1,170 @@ +--- +id: 5d7925341747ad42b12f8e68 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. + +The `concat` method returns a new array instead of modifying an existing one: + +```js +[1,2,3].concat(4); // [1, 2, 3, 4] +[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] +``` + +Use `concat` instead of `push` to return the result of adding `end` to `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(1, 2)) === '[1,2]' && + code.includes('concat') && + !code.includes('push') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md new file mode 100644 index 00000000000..448578598f5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md @@ -0,0 +1,163 @@ +--- +id: 5d792535b0b3c198ee3ed6f9 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The `concat` method can also accept arrays: + +```js +[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] +[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] +``` + +Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md new file mode 100644 index 00000000000..6e89d44a236 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md @@ -0,0 +1,158 @@ +--- +id: 5d7925357a0533eb221b005d +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('arr') && + code.replace(/\s/g, '').includes('[start].concat([end])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md new file mode 100644 index 00000000000..0d876da26b6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md @@ -0,0 +1,157 @@ +--- +id: 5d792535591db67ee15b4106 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(3, 2)) === '[]' && + JSON.stringify(range(1, 3)) === '[1,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md new file mode 100644 index 00000000000..ee94e71d4a4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md @@ -0,0 +1,154 @@ +--- +id: 5d792535f1f7adf77de5831d +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md new file mode 100644 index 00000000000..497b63c634b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md @@ -0,0 +1,159 @@ +--- +id: 5d7925353d2c505eafd50cd9 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Remove the curly braces and `return` keyword from `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md new file mode 100644 index 00000000000..862a0002f2f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md @@ -0,0 +1,154 @@ +--- +id: 5d79253539b5e944ba3e314c +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md new file mode 100644 index 00000000000..9845839bbeb --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md @@ -0,0 +1,156 @@ +--- +id: 5d792535a4f1cbff7a8b9a0b +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Make `charRange` return `range(start, end)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md new file mode 100644 index 00000000000..43167394a7b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md @@ -0,0 +1,156 @@ +--- +id: 5d792535e3304f15a8890162 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md new file mode 100644 index 00000000000..f5bb024255e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md @@ -0,0 +1,160 @@ +--- +id: 5d792535a40ea5ac549d6804 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md new file mode 100644 index 00000000000..8369854b752 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md @@ -0,0 +1,159 @@ +--- +id: 5d7925358c220e5b2998909e +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Now, pass `x` to `String.fromCharCode` in the arrow function. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md new file mode 100644 index 00000000000..6253e20d545 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md @@ -0,0 +1,173 @@ +--- +id: 5d7925357729e183a49498aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md new file mode 100644 index 00000000000..03ceaf96068 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md @@ -0,0 +1,176 @@ +--- +id: 5d79253555aa652afbb68086 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md new file mode 100644 index 00000000000..27b4b66f7f2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md @@ -0,0 +1,176 @@ +--- +id: 5d79253582be306d339564f6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md new file mode 100644 index 00000000000..72223dddb2c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md @@ -0,0 +1,176 @@ +--- +id: 5d7925352047e5c54882c436 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md new file mode 100644 index 00000000000..1870ab8b951 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md @@ -0,0 +1,177 @@ +--- +id: 5d79253568e441c0adf9db9f +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md new file mode 100644 index 00000000000..b394d603ed4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md @@ -0,0 +1,183 @@ +--- +id: 5d7925356ab117923b80c9cd +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md new file mode 100644 index 00000000000..e79d2b6f857 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md @@ -0,0 +1,183 @@ +--- +id: 5d792535e54a8cd729a0d708 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md new file mode 100644 index 00000000000..3d6a5a955b7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md @@ -0,0 +1,187 @@ +--- +id: 5d7925353b307724a462b06b +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Finally, return `fn("A")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md new file mode 100644 index 00000000000..994e931f57f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md @@ -0,0 +1,189 @@ +--- +id: 5d792536735f71d746ee5d99 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. + +Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md new file mode 100644 index 00000000000..b06f86f5495 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md @@ -0,0 +1,184 @@ +--- +id: 5d792536ad340d9dff2e4a96 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Now, remove the curly braces and return statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md new file mode 100644 index 00000000000..d1492aa5cbf --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md @@ -0,0 +1,183 @@ +--- +id: 5d7925369614afd92d01fed5 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md new file mode 100644 index 00000000000..8d17549a291 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md @@ -0,0 +1,182 @@ +--- +id: 5d792536504e68254fe02236 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. + +Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md new file mode 100644 index 00000000000..1c388711e2f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md @@ -0,0 +1,186 @@ +--- +id: 5d792536c8d2f0fdfad768fe +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +You can add more arguments by simply adding another arrow with another argument name: + +```js +const manyArguments = a => b => c => d => [a, b, c, d] +``` + +Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md new file mode 100644 index 00000000000..45e6af501cc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md @@ -0,0 +1,182 @@ +--- +id: 5d79253639028b8ec56afcda +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md new file mode 100644 index 00000000000..19bbc068cd3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md @@ -0,0 +1,192 @@ +--- +id: 5d792536834f2fd93e84944f +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +You call curried functions like this: + +```js +const result = add(1)(2); +``` + +Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md new file mode 100644 index 00000000000..e220cf656e5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md @@ -0,0 +1,186 @@ +--- +id: 5d792536ddff9ea73c90a994 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. + +Change `x => elemValue(n)(x)` to `elemValue(n)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md new file mode 100644 index 00000000000..eaff17e3511 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md @@ -0,0 +1,184 @@ +--- +id: 5d7925361596f84067904f7f +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('const fn') && + code.includes('varRangeExpanded') && + evalFormula('A1:J133') === '3' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md new file mode 100644 index 00000000000..03ec1f65ba2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md @@ -0,0 +1,188 @@ +--- +id: 5d792536dd8a4daf255488ac +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md new file mode 100644 index 00000000000..b1139d99d92 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md @@ -0,0 +1,190 @@ +--- +id: 5d792536449c73004f265fb1 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md new file mode 100644 index 00000000000..a481e918c67 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md @@ -0,0 +1,192 @@ +--- +id: 5d79253685fc69b8fe60a0d2 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. + +This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md new file mode 100644 index 00000000000..64e48966f02 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md @@ -0,0 +1,188 @@ +--- +id: 5d792536dc6e3ab29525de9e +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md new file mode 100644 index 00000000000..57da365160d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md @@ -0,0 +1,190 @@ +--- +id: 5d792536cfd0fd893c630abb +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.includes('varRegex') && + code.includes('varExpanded') && + evalFormula('aC12bc') === 'abc' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md new file mode 100644 index 00000000000..2dc9ec5c8ab --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md @@ -0,0 +1,197 @@ +--- +id: 5d7925366a5ff428fb483b40 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md new file mode 100644 index 00000000000..0516f1f77e6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md @@ -0,0 +1,195 @@ +--- +id: 5d7925365d4035eeb2e395fd +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md new file mode 100644 index 00000000000..a1022f45c6a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md @@ -0,0 +1,200 @@ +--- +id: 5d7925364c106e9aaf05a16f +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. + +Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(evalFormula('(2+2)*2') === '8'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md new file mode 100644 index 00000000000..5617221e798 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md @@ -0,0 +1,208 @@ +--- +id: 5d792536970cd8e819cc8a96 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +You can define arrow functions without arguments: + +```js +const two = () => 2; +``` + +Define an empty arrow function without arguments and assign it to `window.onload`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('window.onload=()=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md new file mode 100644 index 00000000000..06b401c7e8e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md @@ -0,0 +1,211 @@ +--- +id: 5d792536e33baeaa60129e0a +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md new file mode 100644 index 00000000000..59443f50dc9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md @@ -0,0 +1,217 @@ +--- +id: 5d7925379e2a488f333e2d43 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Now define a function `createLabel` which takes an argument `name` and has an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md new file mode 100644 index 00000000000..3a3a6f126c8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md @@ -0,0 +1,220 @@ +--- +id: 5d7925379000785f6d8d9af3 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Inside `createLabel`, assign `document.createElement("div")` to `label`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md new file mode 100644 index 00000000000..a9a1dcc5726 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md @@ -0,0 +1,229 @@ +--- +id: 5d79253791391b0acddd0ac5 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Add the following code to `createLabel`: + +```js +label.className = "label"; +label.textContent = name; +container.appendChild(label); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md new file mode 100644 index 00000000000..780a9dab7fe --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md @@ -0,0 +1,225 @@ +--- +id: 5d7925373104ae5ae83f20a5 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +The `forEach` method takes a function and calls it with each element of the array. + +Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md new file mode 100644 index 00000000000..ccfac003142 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md @@ -0,0 +1,225 @@ +--- +id: 5d7925373b7127cfaeb50c26 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). + +# --hints-- + +See description above for instructions. + +```js +assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md new file mode 100644 index 00000000000..5216d89d1d9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md @@ -0,0 +1,230 @@ +--- +id: 5d792537cb3a5cd6baca5e1a +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md new file mode 100644 index 00000000000..544000db907 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md @@ -0,0 +1,232 @@ +--- +id: 5d79253742f3313d55db981f +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md new file mode 100644 index 00000000000..bf8bee8395a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md @@ -0,0 +1,237 @@ +--- +id: 5d7925379e0180a438ce7f95 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md new file mode 100644 index 00000000000..d57aa617713 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md @@ -0,0 +1,239 @@ +--- +id: 5d792537c80984dfa5501b96 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Inside `letters.forEach`, assign `document.createElement("input")` to `input`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md new file mode 100644 index 00000000000..4568ec50b24 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md @@ -0,0 +1,251 @@ +--- +id: 5d7925377b54d8a76efb5657 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Add the following code to `letters.forEach`: + +```js +input.type = "text"; +input.id = y + x; +input.onchange = update; +container.appendChild(input); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md new file mode 100644 index 00000000000..6543d3124fb --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md @@ -0,0 +1,251 @@ +--- +id: 5d7925371398513549bb6395 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md new file mode 100644 index 00000000000..378c01975ac --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md @@ -0,0 +1,257 @@ +--- +id: 5d792537ea3eaf302bf2d359 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md new file mode 100644 index 00000000000..93968d4e378 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md @@ -0,0 +1,261 @@ +--- +id: 5d792537533b1c7843bfd029 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +The `includes` method works on a string and checks if the argument is its substring. + +Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md new file mode 100644 index 00000000000..dcc989ea328 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md @@ -0,0 +1,260 @@ +--- +id: 5d792537dc0fe84345d4f19e +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md new file mode 100644 index 00000000000..ce97294c369 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md @@ -0,0 +1,260 @@ +--- +id: 5d792537b6cadae0f4b0cda1 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. + +Use the `slice` method to log the first two letters of `value` to the console. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md new file mode 100644 index 00000000000..1eaf868ad16 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md @@ -0,0 +1,262 @@ +--- +id: 5d79253770083fb730c93a93 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. + +Change the call to `slice` to log all characters except the first instead. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md new file mode 100644 index 00000000000..cd6f2405a86 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md @@ -0,0 +1,266 @@ +--- +id: 5d792537fef76b226b63b93b +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md new file mode 100644 index 00000000000..fb91f29be96 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md @@ -0,0 +1,273 @@ +--- +id: 5d79253760fca25ccbbd8990 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +The array destructuring syntax can be used to extract values from arrays: + +```js +const [x, y] = [1, 2]; // in variables +const fn = ([x, y]) => x + y // in functions +``` + +Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && + spreadsheetFunctions['random']([1, 2]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md new file mode 100644 index 00000000000..c933b24aaac --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md @@ -0,0 +1,267 @@ +--- +id: 5d7925374321824cba309875 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( + code.replace(/\s/g, '') + ) && spreadsheetFunctions['random']([1, 1]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md new file mode 100644 index 00000000000..2a5ee766e3d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md @@ -0,0 +1,276 @@ +--- +id: 5d7925381e8565a5c50ba7f1 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. + +You can check if this is the case by comparing a call to a function with another call (with the same arguments): + +```js +console.log(f(2) === f(2)); // always true for pure functions +``` + +Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md new file mode 100644 index 00000000000..2f419cf2876 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md @@ -0,0 +1,271 @@ +--- +id: 5d7925383f1b77db7f1ff59e +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +This is (probably) false, so `random` is certainly impure. + +The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. + +Call `window.onload()` in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md new file mode 100644 index 00000000000..176257a88b5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md @@ -0,0 +1,268 @@ +--- +id: 5d792538de9fa3f298bcd5f6 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md new file mode 100644 index 00000000000..ad427105522 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md @@ -0,0 +1,270 @@ +--- +id: 5d7925385b74f69642e1fea5 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. + +Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md new file mode 100644 index 00000000000..231159b2b34 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md @@ -0,0 +1,265 @@ +--- +id: 5d7925380ea76d55b2c97d7b +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. + +Remove the `console.log` statement. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.includes('console.log')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md new file mode 100644 index 00000000000..36fd2f83b90 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md @@ -0,0 +1,267 @@ +--- +id: 5d792538be4fe331f1a6c008 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. + +But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. + +Change these calls to `""` - the function is now pure but doesn't work. + +# --hints-- + +See description above for instructions. + +```js +const nos = code.replace(/\s/g, ''); +assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md new file mode 100644 index 00000000000..4b9e711aae6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md @@ -0,0 +1,264 @@ +--- +id: 5d792538d169f33142175b95 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. + +Add an argument `cells` to `evalFormula`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md new file mode 100644 index 00000000000..39584a049ae --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md @@ -0,0 +1,272 @@ +--- +id: 5d792538e48b5a2c6e5bbe12 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md new file mode 100644 index 00000000000..1ab52bf8124 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md @@ -0,0 +1,268 @@ +--- +id: 5d7925387f3e9da5ec856dbe +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Update the recursive call to `evalFormula` by passing in `cells` as the second argument. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md new file mode 100644 index 00000000000..11e0b2d0bbc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md @@ -0,0 +1,269 @@ +--- +id: 5d79253824ae9b4a6e6f3108 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. + +# --hints-- + +See description above for instructions. + +```js +assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md new file mode 100644 index 00000000000..d4c961be237 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md @@ -0,0 +1,275 @@ +--- +id: 5d7925383f122a279f4c54ad +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The `find` method returns the first element of an array that satisfies the function passed to it. + +Chain `find` onto `cells` and pass it `cell => cell === id`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md new file mode 100644 index 00000000000..abdc6794679 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md @@ -0,0 +1,272 @@ +--- +id: 5d7925387b682e962f209269 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md new file mode 100644 index 00000000000..4baca0e6cc3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md @@ -0,0 +1,272 @@ +--- +id: 5d792538de774217b173288e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md new file mode 100644 index 00000000000..a2c5b9b1bef --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md @@ -0,0 +1,269 @@ +--- +id: 5d79253891d93585323d1f3c +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md new file mode 100644 index 00000000000..637af181723 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md @@ -0,0 +1,271 @@ +--- +id: 5d7925384e34e944ecb4612d +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md new file mode 100644 index 00000000000..d12140aa462 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md @@ -0,0 +1,273 @@ +--- +id: 5d792538631844ad0bdfb4c3 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. + +Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md new file mode 100644 index 00000000000..c966a9161ed --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md @@ -0,0 +1,279 @@ +--- +id: 5d792538e2a8d20cc580d481 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +The `slice` method can also work on arrays. + +Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md new file mode 100644 index 00000000000..5483ee8a3e9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md @@ -0,0 +1,285 @@ +--- +id: 5d792538f5004390d6678554 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +You can also pass in a negative argument to `slice` to specify that index from the end: + +```js +[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] +``` + +Use a negative index to add a function `lasttwo` which returns the last two elements of an array. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md new file mode 100644 index 00000000000..3e61d996f85 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md @@ -0,0 +1,288 @@ +--- +id: 5d792539dd4fd4c96fd85f7e +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +The `%` operator returns the remainder: + +```js +4 % 3; // 1 +5 % 3; // 2 +6 % 3; // 0 +``` + +Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. + +# --hints-- + +See description above for instructions. + +```js +assert(isEven(20) && !isEven(31)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md new file mode 100644 index 00000000000..8c4b6a9e314 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md @@ -0,0 +1,292 @@ +--- +id: 5d79253949802f8587c8bbd3 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +The `filter` method keeps only the elements of an array that satisfy the function passed to it: + +```js +[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] +``` + +Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && + code.includes('filter') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md new file mode 100644 index 00000000000..c441a9459d8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md @@ -0,0 +1,297 @@ +--- +id: 5d7925395888767e9304c082 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. + +The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. + +For example, here's how to multiply all the value in an array: + +```js +[2, 3, 4].reduce((a, x) => a * x); // 24 +``` + +Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md new file mode 100644 index 00000000000..787472aea1d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md @@ -0,0 +1,291 @@ +--- +id: 5d7925393b30099e37a34668 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +The `includes` method checks if an element is in an array. + +Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md new file mode 100644 index 00000000000..f032db3ac16 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md @@ -0,0 +1,301 @@ +--- +id: 5d7925398157757b23730fdd +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: + +```js +[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] +// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array +// now it first tries [].concat(1) which works +``` + +Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md new file mode 100644 index 00000000000..6b5714247b5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md @@ -0,0 +1,293 @@ +--- +id: 5d792539de4b9ac14dd40409 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === + '[1,3,5,7,9]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md new file mode 100644 index 00000000000..8f15f9adfd4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md @@ -0,0 +1,298 @@ +--- +id: 5d792539534f1bf991bb987f +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +ES6 introduced a shorthand object literal syntax: + +```js +const a = 10; +const myObject = { a }; +console.log(myObject); // { a: 10 } +``` + +First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. + +# --hints-- + +See description above for instructions. + +```js +assert(sum([1, 2, 3]) === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md new file mode 100644 index 00000000000..eef96f2d471 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md @@ -0,0 +1,293 @@ +--- +id: 5d7925394089b762f93ffa52 +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. + +This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. + +# --hints-- + +See description above for instructions. + +```js +assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md new file mode 100644 index 00000000000..cb3b30d8c4f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md @@ -0,0 +1,298 @@ +--- +id: 5d792539ec758d45a6900173 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. + +As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md new file mode 100644 index 00000000000..621e4cc4fbc --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md @@ -0,0 +1,308 @@ +--- +id: 5d7925398d525f61a9ff3a79 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +The spread operator allow you to pass multiple arguments instead of an array: + +```js +const arr = [1, 2, 3]; +const sum3 = (a, b, c) => a + b + c; +sum3(...arr); // 6 +``` + +Use the spread operator to add `range` to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && + code.includes('...') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md new file mode 100644 index 00000000000..8d27ee2bf76 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md @@ -0,0 +1,300 @@ +--- +id: 5d792539a222f385c5c17d2b +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Now define a `median` function which takes an argument `nums` (in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md new file mode 100644 index 00000000000..08ffbd94e4a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md @@ -0,0 +1,312 @@ +--- +id: 5d7925398a7184b41b12a0e0 +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +The `sort` method sorts an array alphabetically: + +```js +["B", "C", "A"].sort(); // ["A", "B", "C"] +``` + +Assign the sorted `nums` to `sorted` in `median`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md new file mode 100644 index 00000000000..49b025f4b1e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md @@ -0,0 +1,318 @@ +--- +id: 5d7925399afb905c34730a75 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: + +```js +[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] +``` + +If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. + +Use `sort` to sort `nums` in ascending order. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md new file mode 100644 index 00000000000..cad2f5aa466 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md @@ -0,0 +1,312 @@ +--- +id: 5d792539728d1aa7788e2c9b +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. + +You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md new file mode 100644 index 00000000000..df39b579f78 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md @@ -0,0 +1,312 @@ +--- +id: 5d79253939434a2724c0ec41 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md new file mode 100644 index 00000000000..1e4f1aca372 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md @@ -0,0 +1,311 @@ +--- +id: 5d792539b9e1d3c54d8fe94a +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Add a return statement to `median` so that it returns `isEven(length)`. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md new file mode 100644 index 00000000000..4cf66a6dd6a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md @@ -0,0 +1,316 @@ +--- +id: 5d792539b2e0bd8f9e8213e4 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. + +Note that the `middle` variable is close to the middle but is not actually the middle. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md new file mode 100644 index 00000000000..2428ff3a79d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md @@ -0,0 +1,320 @@ +--- +id: 5d792539239148965a1a59a5 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.median([1, 20, 3]) === 3 && + spreadsheetFunctions.median([27, 7, 20, 10]) === 15 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md new file mode 100644 index 00000000000..ff91ae909fd --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md @@ -0,0 +1,325 @@ +--- +id: 5d792539e1446045d0df6d28 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +The `some` method checks if any element of the array satisfies the provided testing function. + +Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.someeven([1, 5, 4, 3]) && + !spreadsheetFunctions.someeven([3, 5, 9]) && + code.includes('.some') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md new file mode 100644 index 00000000000..ddede0016d6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md @@ -0,0 +1,327 @@ +--- +id: 5d79253a2febbb77098730b9 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +The `every` method checks if all elements of an array satisfy the provided testing function. + +Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && + !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && + code.includes('.every') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md new file mode 100644 index 00000000000..c475cf8ba22 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md @@ -0,0 +1,328 @@ +--- +id: 5d79253a98bd9fdf7ce68d0a +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. + +While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. + +Replace the body of `range` with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md new file mode 100644 index 00000000000..52e294c3655 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md @@ -0,0 +1,324 @@ +--- +id: 5d79253a1e9abf29de64c177 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. + +Make `range` return an array of `undefined` with size `end - start + 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md new file mode 100644 index 00000000000..ce1e1c87c73 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md @@ -0,0 +1,327 @@ +--- +id: 5d79253a8b29d78984369e4b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +The `fill` method takes an argument and replaces all elements of the array with that argument. + +Use it on the array in `range` to replace everything with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md new file mode 100644 index 00000000000..9630c3210b7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md @@ -0,0 +1,330 @@ +--- +id: 5d79253ad297a31cbe073718 +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +The function in the `map` method can actually take a second argument: the index of the element. + +This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). + +Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md new file mode 100644 index 00000000000..7531f12a5a3 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md @@ -0,0 +1,316 @@ +--- +id: 5dc10b8b93704f41d279eb5b +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-001.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-001.md new file mode 100644 index 00000000000..737056e9343 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-001.md @@ -0,0 +1,33 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9de +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. + +First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. + +# --hints-- + +test-text + +```js +assert(//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-002.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-002.md new file mode 100644 index 00000000000..e69a56a6c39 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-002.md @@ -0,0 +1,43 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9df +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. + +# --hints-- + +test-text + +```js +assert( + /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( + code + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + + + + + + + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-003.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-003.md new file mode 100644 index 00000000000..4060dac9f7c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-003.md @@ -0,0 +1,51 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e0 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the head, add a `title` of `D3 Dashboard`. + +# --hints-- + +test-text + +```js +assert( + /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-004.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-004.md new file mode 100644 index 00000000000..92d0e9e6672 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-004.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e1 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. + +# --hints-- + +test-text + +```js +const link = code.match(/]>/gi)[0]; +assert( + /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && + /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-005.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-005.md new file mode 100644 index 00000000000..126ee1afb77 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-005.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e2 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. + +# --hints-- + +test-text + +```js +assert($('div.dashboard').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-006.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-006.md new file mode 100644 index 00000000000..8d2dc0f0fc2 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-006.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-007.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-007.md new file mode 100644 index 00000000000..9c9637a79da --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-007.md @@ -0,0 +1,66 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('width') === '980px' && dashboard.css('height') === '500px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-008.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-008.md new file mode 100644 index 00000000000..f30f2278512 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-008.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e5 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('background-color') === 'rgb(255, 255, 255)' && + dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-009.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-009.md new file mode 100644 index 00000000000..a9e92dd79e5 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-009.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e6 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. + +# --hints-- + +test-text + +```js +const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; +assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-010.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-010.md new file mode 100644 index 00000000000..a5ebf98f5a0 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-010.md @@ -0,0 +1,75 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e7 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give the container some space by adding a `padding` of `100px 10px` to the `body` element. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-011.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-011.md new file mode 100644 index 00000000000..e852c01758e --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-011.md @@ -0,0 +1,81 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e8 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('display') === 'flex' && + dashboard.css('align-items') === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-012.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-012.md new file mode 100644 index 00000000000..c087db365e8 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-012.md @@ -0,0 +1,79 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e9 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[0]; +assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-013.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-013.md new file mode 100644 index 00000000000..1900674079c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-013.md @@ -0,0 +1,96 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ea +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. + +This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[1]; +assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-014.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-014.md new file mode 100644 index 00000000000..934305ffeb0 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-014.md @@ -0,0 +1,95 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9eb +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[2]; +assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-015.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-015.md new file mode 100644 index 00000000000..6972bb06c2a --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-015.md @@ -0,0 +1,103 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ec +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. + +In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. + +The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. + +# --hints-- + +test-text + +```js +assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-016.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-016.md new file mode 100644 index 00000000000..c518fc0fd82 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-016.md @@ -0,0 +1,108 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ed +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. + +# --hints-- + +test-text + +```js +assert( + twitterColor === '#7cd9d1' && + tumblrColor === '#f6dd71' && + instagramColor === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-017.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-017.md new file mode 100644 index 00000000000..8537b5c634a --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-017.md @@ -0,0 +1,113 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ee +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: + +```js +const variableName = d3.select('.className') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('.dashboard')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-018.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-018.md new file mode 100644 index 00000000000..e034d250e57 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-018.md @@ -0,0 +1,117 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ef +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: + +```js +const variableName = d3.select('selectedElement') + .append('elementToAdd') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('svg')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-019.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-019.md new file mode 100644 index 00000000000..71a9b118ed1 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-019.md @@ -0,0 +1,124 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. + +`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: + +```js +const variableName = d3.select('element') + .append('element') + .attr('attribute', 'value') +``` + +Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.width.value === '700'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-020.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-020.md new file mode 100644 index 00000000000..64d86709ab6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-020.md @@ -0,0 +1,116 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f1 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.height.value === '500'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-021.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-021.md new file mode 100644 index 00000000000..06bcb3f2432 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-021.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f2 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. + +Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. + +# --hints-- + +test-text + +```js +assert( + typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-022.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-022.md new file mode 100644 index 00000000000..20a021de05d --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-022.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. + +# --hints-- + +test-text + +```js +const domain = yScale.domain(); +assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-023.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-023.md new file mode 100644 index 00000000000..e7a769694bf --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-023.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. + +Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. + +Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. + +# --hints-- + +test-text + +```js +const range = yScale.range(); +assert(range.length === 2 && range[0] === 430 && range[1] === 70); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-024.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-024.md new file mode 100644 index 00000000000..bfb5cb47cf4 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-024.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f5 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. + +# --hints-- + +test-text + +```js +assert( + typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-025.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-025.md new file mode 100644 index 00000000000..0ad79254818 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-025.md @@ -0,0 +1,131 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. + +# --hints-- + +test-text + +```js +const domain = xScale.domain(); +assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-026.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-026.md new file mode 100644 index 00000000000..c2eda71b4f8 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-026.md @@ -0,0 +1,133 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f7 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. + +# --hints-- + +test-text + +```js +const range = xScale.range(); +assert(range.length === 2 && range[0] === 70 && range[1] === 630); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-027.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-027.md new file mode 100644 index 00000000000..fadf8788314 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-027.md @@ -0,0 +1,138 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f8 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. + +# --hints-- + +test-text + +```js +assert( + typeof yAxis === 'function' && + /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-028.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-028.md new file mode 100644 index 00000000000..3c6e36d9cc2 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-028.md @@ -0,0 +1,142 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f9 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. + +# --hints-- + +test-text + +```js +assert( + typeof xAxis === 'function' && + /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-029.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-029.md new file mode 100644 index 00000000000..aae1810fbf7 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-029.md @@ -0,0 +1,143 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fa +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". + +# --hints-- + +test-text + +```js +assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-030.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-030.md new file mode 100644 index 00000000000..5a8d4514367 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-030.md @@ -0,0 +1,147 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fb +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. + +# --hints-- + +test-text + +```js +assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-031.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-031.md new file mode 100644 index 00000000000..94721751a99 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fc +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. + +Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-032.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-032.md new file mode 100644 index 00000000000..1482a45c496 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-032.md @@ -0,0 +1,150 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fd +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-033.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-033.md new file mode 100644 index 00000000000..838f00a1e26 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-033.md @@ -0,0 +1,153 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fe +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 13); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-034.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-034.md new file mode 100644 index 00000000000..ffd84f411a9 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-034.md @@ -0,0 +1,156 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ff +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 22); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-035.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-035.md new file mode 100644 index 00000000000..e5afa9d8688 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-035.md @@ -0,0 +1,158 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca00 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. + +# --hints-- + +test-text + +```js +assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-036.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-036.md new file mode 100644 index 00000000000..61a26b75fff --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-036.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca01 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: + +```js +.selectAll('element') +``` + +# --hints-- + +test-text + +```js +assert( + /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-037.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-037.md new file mode 100644 index 00000000000..194e3ad318c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-037.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca02 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.transform === 'translate(-12px) rotate(-50deg)' || + index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-038.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-038.md new file mode 100644 index 00000000000..b17ce9013b1 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-038.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca03 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => index.style['text-anchor'] === 'end' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-039.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-039.md new file mode 100644 index 00000000000..2025374c7a1 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-039.md @@ -0,0 +1,173 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca04 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. + +You will add some hover effects later, so the pointer will make for a better experience. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.cursor === 'pointer' && index.style.font === '10px verdana' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-040.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-040.md new file mode 100644 index 00000000000..52d9a027fd4 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-040.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca05 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. + +The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert( + ticks[0].innerHTML === '0k' && + ticks[1].innerHTML === '1k' && + ticks[2].innerHTML === '2k' && + ticks[3].innerHTML === '3k' && + ticks[4].innerHTML === '4k' && + ticks[5].innerHTML === '5k' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-041.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-041.md new file mode 100644 index 00000000000..82a3261d9b5 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-041.md @@ -0,0 +1,171 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca06 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-042.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-042.md new file mode 100644 index 00000000000..aa8a37baf20 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-042.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca07 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. + +# --hints-- + +test-text + +```js +assert( + /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-043.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-043.md new file mode 100644 index 00000000000..a91e12f41e6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-043.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca08 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. + +# --hints-- + +test-text + +```js +assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-044.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-044.md new file mode 100644 index 00000000000..5a93e72d48f --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-044.md @@ -0,0 +1,192 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca09 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: + +```js +.x(d => d.year) +``` + +You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). + +This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. + +# --hints-- + +test-text + +```js +assert( + /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-045.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-045.md new file mode 100644 index 00000000000..e07ef7245ce --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0a +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. + +In the "d function" you created, return `xScale(d.year)` instead of `d.year`. + +# --hints-- + +test-text + +```js +assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-046.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-046.md new file mode 100644 index 00000000000..9ba6b01ac8e --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-046.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0b +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. + +This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. + +These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-047.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-047.md new file mode 100644 index 00000000000..27b6eb3229d --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-047.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0c +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 3 && + /lineGraph\.append\((`|'|")path\1\)/gi.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-048.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-048.md new file mode 100644 index 00000000000..0af7e8110d7 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0d +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. + +Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". + +After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. + +# --hints-- + +test-text + +```js +assert($('svg path')[2].getAttribute('d').length === 151); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-049.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-049.md new file mode 100644 index 00000000000..880f7b5d0a6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0e +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const twitterPath = $('svg path')[2]; +assert( + twitterPath.getAttribute('stroke') === '#7cd9d1' && + twitterPath.getAttribute('stroke-width') == '3' && + twitterPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-050.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-050.md new file mode 100644 index 00000000000..21584d84adf --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-050.md @@ -0,0 +1,198 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0f +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. + +# --hints-- + +test-text + +```js +assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-051.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-051.md new file mode 100644 index 00000000000..3c1c0750188 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-051.md @@ -0,0 +1,204 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca10 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculate their values just like you did for the Twitter line. + +# --hints-- + +test-text + +```js +assert( + /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-052.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-052.md new file mode 100644 index 00000000000..74a4638e890 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca11 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculate their values just like you did for the Twitter line. + +The x values for each line will be the same, but the y values will use the data from the different platforms. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-053.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-053.md new file mode 100644 index 00000000000..746e1ab4b1a --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-053.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca12 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 4 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-054.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-054.md new file mode 100644 index 00000000000..695da3fee70 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-054.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca13 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. + +# --hints-- + +test-text + +```js +assert($('svg path')[3].getAttribute('d').length === 115); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-055.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-055.md new file mode 100644 index 00000000000..a200a166f95 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-055.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca14 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const tumblrPath = $('svg path')[3]; +assert( + tumblrPath.getAttribute('stroke') === '#f6dd71' && + tumblrPath.getAttribute('stroke-width') == '3' && + tumblrPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-056.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-056.md new file mode 100644 index 00000000000..c4f75859463 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-056.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca15 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. + +# --hints-- + +test-text + +```js +assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-057.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-057.md new file mode 100644 index 00000000000..59e2b7b22ca --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-057.md @@ -0,0 +1,226 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca16 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Appropriately set the `x` values for `instagramLine` like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-058.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-058.md new file mode 100644 index 00000000000..ad99613e2db --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-058.md @@ -0,0 +1,229 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca17 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-059.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-059.md new file mode 100644 index 00000000000..fe46511da37 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-059.md @@ -0,0 +1,231 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca18 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 5 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-060.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-060.md new file mode 100644 index 00000000000..5863f052f3d --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-060.md @@ -0,0 +1,230 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca19 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. + +# --hints-- + +test-text + +```js +assert($('svg path')[4].getAttribute('d').length === 171); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-061.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-061.md new file mode 100644 index 00000000000..45e97e2ba69 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-061.md @@ -0,0 +1,239 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1a +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. + +# --hints-- + +test-text + +```js +const instagramPath = $('svg path')[4]; +assert( + instagramPath.getAttribute('stroke') === '#fd9b98' && + instagramPath.getAttribute('stroke-width') == '3' && + instagramPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-062.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-062.md new file mode 100644 index 00000000000..82eef8d81e7 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-062.md @@ -0,0 +1,247 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1b +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: + +```js +lineGraph.selectAll('twitter-circles') +``` + +`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-063.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-063.md new file mode 100644 index 00000000000..942bc905877 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-063.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1c +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Add the D3 `data` function to your selection and pass it the data array like this: + +```js +.data(data) +``` + +# --hints-- + +test-text + +```js +assert(/\.data\s*\(\s*data\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-064.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-064.md new file mode 100644 index 00000000000..db5343e098f --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-064.md @@ -0,0 +1,248 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1d +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Next, chain the `enter()` function to the selection. + +The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. + +In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. + +# --hints-- + +test-text + +```js +assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-065.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-065.md new file mode 100644 index 00000000000..609632232b4 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-065.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1e +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-066.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-066.md new file mode 100644 index 00000000000..d5291b996da --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-066.md @@ -0,0 +1,250 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. + +Use the `attr` function to set the `cx` to `d => xScale(d.year)`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cx') == '70'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-067.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-067.md new file mode 100644 index 00000000000..f8b852ac2b8 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-067.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca20 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. + +As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cy') == '243.232'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-068.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-068.md new file mode 100644 index 00000000000..ad9dfcf5dfc --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-068.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca21 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('r') == '6'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-069.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-069.md new file mode 100644 index 00000000000..9d2d9c5b0b0 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-069.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca22 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[0].getAttribute('fill') === 'white' && + $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-070.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-070.md new file mode 100644 index 00000000000..e8beb17a75b --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-070.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca23 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-071.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-071.md new file mode 100644 index 00000000000..25b5c92d036 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-071.md @@ -0,0 +1,263 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca24 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-072.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-072.md new file mode 100644 index 00000000000..b5eee1874d9 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-072.md @@ -0,0 +1,268 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca25 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. + +Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 18); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-073.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-073.md new file mode 100644 index 00000000000..4d3a27e49d0 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-073.md @@ -0,0 +1,274 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca26 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('cx') == '70' && + $('svg circle')[9].getAttribute('cy') == '401.128' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-074.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-074.md new file mode 100644 index 00000000000..df1221f436d --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-074.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca27 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('r') == '6' && + $('svg circle')[9].getAttribute('fill') === 'white' && + $('svg circle')[9].getAttribute('stroke') === '#f6dd71' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-075.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-075.md new file mode 100644 index 00000000000..53c158898b0 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-075.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca28 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Set the `cursor` to `pointer` using the `style` function. + +# --hints-- + +test-text + +```js +assert($('svg circle')[9].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-076.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-076.md new file mode 100644 index 00000000000..dfef7440d25 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-076.md @@ -0,0 +1,287 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca29 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-077.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-077.md new file mode 100644 index 00000000000..5ed00425a75 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-077.md @@ -0,0 +1,288 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2a +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 27); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-078.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-078.md new file mode 100644 index 00000000000..fea82b1f06f --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-078.md @@ -0,0 +1,296 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2b +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Appropriately set the `cx` and `cy` attributes for the Instagram circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('cx') == '70' && + $('svg circle')[18].getAttribute('cy') == '424.024' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-079.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-079.md new file mode 100644 index 00000000000..36c953d0596 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-079.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2c +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('r') == '6' && + $('svg circle')[18].getAttribute('fill') === 'white' && + $('svg circle')[18].getAttribute('stroke') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-080.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-080.md new file mode 100644 index 00000000000..08a57df3f2f --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-080.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2d +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Apply the appropriate `cursor` style for these circles. + +# --hints-- + +test-text + +```js +assert($('svg circle')[18].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-081.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-081.md new file mode 100644 index 00000000000..14ffc2dbaf6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-081.md @@ -0,0 +1,309 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. + +# --hints-- + +test-text + +```js +assert( + /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-082.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-082.md new file mode 100644 index 00000000000..ef8009859e8 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-082.md @@ -0,0 +1,312 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2f +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. + +# --hints-- + +test-text + +```js +assert( + /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-083.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-083.md new file mode 100644 index 00000000000..43e8ea22992 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-083.md @@ -0,0 +1,315 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca30 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-084.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-084.md new file mode 100644 index 00000000000..1e01a5f30ff --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-084.md @@ -0,0 +1,318 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca31 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. + +# --hints-- + +test-text + +```js +assert( + $('svg')[1].getAttribute('width') == '200' && + $('svg')[1].getAttribute('height') == '200' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-085.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-085.md new file mode 100644 index 00000000000..33057ce9acc --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-085.md @@ -0,0 +1,319 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca32 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-086.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-086.md new file mode 100644 index 00000000000..fc228825cc5 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-086.md @@ -0,0 +1,324 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca33 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-087.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-087.md new file mode 100644 index 00000000000..bf1d3f754da --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-087.md @@ -0,0 +1,328 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca34 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-088.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-088.md new file mode 100644 index 00000000000..73bf1cd804a --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-088.md @@ -0,0 +1,329 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca35 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. + +In this case, each platform of followers you have will map directly to a single color with nothing in between. + +# --hints-- + +test-text + +```js +assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-089.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-089.md new file mode 100644 index 00000000000..20900e45822 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-089.md @@ -0,0 +1,334 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca36 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. + +# --hints-- + +test-text + +```js +assert( + /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-090.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-090.md new file mode 100644 index 00000000000..a4a80c7f95d --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-090.md @@ -0,0 +1,336 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca37 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. + +# --hints-- + +test-text + +```js +assert( + /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-091.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-091.md new file mode 100644 index 00000000000..8a4e9aab0a3 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-091.md @@ -0,0 +1,335 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca38 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-092.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-092.md new file mode 100644 index 00000000000..84edb9a9490 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-092.md @@ -0,0 +1,344 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca39 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. + +In a few steps, you will make an array out of your data variable that will be passed to this function. + +# --hints-- + +test-text + +```js +assert( + /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-093.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-093.md new file mode 100644 index 00000000000..781851c9440 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-093.md @@ -0,0 +1,345 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3a +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-094.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-094.md new file mode 100644 index 00000000000..58dc3df6029 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-094.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3b +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-095.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-095.md new file mode 100644 index 00000000000..857d79ad14b --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-095.md @@ -0,0 +1,367 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3c +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: + +```js +d3.entries(data[8].followers)) +``` + +The array it builds looks like this: + +```js +[ + { key: 'twitter', value: 2845 }, + { key: 'tumblr', value: 2040 }, + { key: 'instagram', value: 4801 } +] +``` + +This is where the `value` comes from in your `pie` variable. + +Add the `d3.entries` function as your `pie` argument. Use it to create the above array. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-096.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-096.md new file mode 100644 index 00000000000..19400c8460f --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-096.md @@ -0,0 +1,350 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. + +# --hints-- + +test-text + +```js +assert( + /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-097.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-097.md new file mode 100644 index 00000000000..b94dc14b7b7 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-097.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3e +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Use `append` to add three `g` elements for the pie. + +# --hints-- + +test-text + +```js +assert($('svg g').length === 20); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-098.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-098.md new file mode 100644 index 00000000000..8b1e882f741 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-098.md @@ -0,0 +1,351 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3f +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-099.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-099.md new file mode 100644 index 00000000000..7c2fdc874d7 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-099.md @@ -0,0 +1,352 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca40 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. + +# --hints-- + +test-text + +```js +assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-100.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-100.md new file mode 100644 index 00000000000..ff80e8cbead --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-100.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca41 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. + +Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g')[0].getAttribute('transform'); +assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-101.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-101.md new file mode 100644 index 00000000000..69a67b1c697 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-101.md @@ -0,0 +1,377 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca42 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('fill') === '#7cd9d1' && + pathsArr[1].getAttribute('fill') === '#f6dd71' && + pathsArr[2].getAttribute('fill') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-102.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-102.md new file mode 100644 index 00000000000..c35673b4338 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-102.md @@ -0,0 +1,364 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca43 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Next, set the `stroke` to `white` and the `stroke-width` to `2`. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('stroke') === 'white' && + pathsArr[0].getAttribute('stroke-width') == 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-103.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-103.md new file mode 100644 index 00000000000..b4d01a98916 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-103.md @@ -0,0 +1,365 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca44 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-104.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-104.md new file mode 100644 index 00000000000..f3f23bf2a8c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-104.md @@ -0,0 +1,381 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca47 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: + +```js +.text(d => { + +}) +``` + +The method for getting the percent of each slice will take a few steps: + +1. Find the total number of followers for the displayed year +2. Divide the followers of a single platform by that total +3. Turn it into a string to display + +# --hints-- + +test-text + +```js +assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-105.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-105.md new file mode 100644 index 00000000000..7dd7bc8f459 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-105.md @@ -0,0 +1,383 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca48 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: + +```js +d3.values(data[8].followers) +``` + +It will be an array with the values of the followers for the three platforms in 2020. + +Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. + +# --hints-- + +test-text + +```js +assert( + /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-106.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-106.md new file mode 100644 index 00000000000..1e304f5fbb6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-106.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca49 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. + +# --hints-- + +test-text + +```js +assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-107.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-107.md new file mode 100644 index 00000000000..9fcc056c466 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-107.md @@ -0,0 +1,376 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4a +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-108.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-108.md new file mode 100644 index 00000000000..124a7abec7e --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-108.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4b +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: + +```js +${Math.round(percent * 100)}% +``` + +Don't forget that you need a `return` statement here since you aren't using an implicit return. + +# --hints-- + +test-text + +```js +assert( + /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-109.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-109.md new file mode 100644 index 00000000000..de9a3090429 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-109.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4c +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` + +The `centroid` function will find the midpoint of each slice for each text element. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g text')[0] + .getAttribute('transform') + .replace('translate(', '') + .replace(')', '') + .split(','); +assert(transform[0] < 39 && transform[1] > 31); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-110.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-110.md new file mode 100644 index 00000000000..cfe05994783 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-110.md @@ -0,0 +1,389 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4d +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. + +After that, set the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +const text = $('.dashboard div svg g text')[0]; +assert( + text.style.textAnchor === 'middle' && + text.style.font.toLowerCase() === '10px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-111.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-111.md new file mode 100644 index 00000000000..5a6cda0ba57 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-111.md @@ -0,0 +1,391 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-112.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-112.md new file mode 100644 index 00000000000..be844c9e21c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-112.md @@ -0,0 +1,394 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the table a `width` of `200` and a `height` of `120` using `attr`. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert( + table.getAttribute('width') == 200 && table.getAttribute('height') == 120 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-113.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-113.md new file mode 100644 index 00000000000..439b742b887 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-113.md @@ -0,0 +1,396 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca50 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Set the `font` to `12px verdana` using the `style` function. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-114.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-114.md new file mode 100644 index 00000000000..1be90df8df5 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-114.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca51 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-115.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-115.md new file mode 100644 index 00000000000..df269c6462c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-115.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca52 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-116.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-116.md new file mode 100644 index 00000000000..eb6c7d09187 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-116.md @@ -0,0 +1,404 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca53 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +Use the `text` function to set the text of the selection to `2020 followers`. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').text() === '2020 followers'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-117.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-117.md new file mode 100644 index 00000000000..7c19f3dcae6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-117.md @@ -0,0 +1,406 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca54 +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-118.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-118.md new file mode 100644 index 00000000000..0cfe9b5a70a --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-118.md @@ -0,0 +1,412 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca55 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-119.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-119.md new file mode 100644 index 00000000000..bcdec5c5339 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-119.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca56 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +Add a `selectAll` function to the selection and pass it the string `tr`. + +# --hints-- + +test-text + +```js +assert( + /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-120.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-120.md new file mode 100644 index 00000000000..4ee832321fb --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-120.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca57 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. + +# --hints-- + +test-text + +```js +assert( + /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-121.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-121.md new file mode 100644 index 00000000000..e03bdbdb791 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-121.md @@ -0,0 +1,418 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca58 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-122.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-122.md new file mode 100644 index 00000000000..ed855f5024f --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-122.md @@ -0,0 +1,422 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca59 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-123.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-123.md new file mode 100644 index 00000000000..7c8fd63c36c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-123.md @@ -0,0 +1,426 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5a +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-124.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-124.md new file mode 100644 index 00000000000..721d4428093 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-124.md @@ -0,0 +1,431 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5b +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[0] + .getAttribute('align') + .toLowerCase() === 'right' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-125.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-125.md new file mode 100644 index 00000000000..565a8dc72fe --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-125.md @@ -0,0 +1,430 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5c +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-126.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-126.md new file mode 100644 index 00000000000..cb21e05cc6a --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-126.md @@ -0,0 +1,437 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5d +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +Set the `align` attribute to `center`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[1] + .getAttribute('align') + .toLowerCase() === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-127.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-127.md new file mode 100644 index 00000000000..90544de2a70 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-127.md @@ -0,0 +1,435 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5e +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Append a `div` element to the selection. Each `div` will be a small square for each color. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td div').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-128.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-128.md new file mode 100644 index 00000000000..bd8711a89b8 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-128.md @@ -0,0 +1,438 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5f +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +Set the `width` to `16px` and the `height` to `16px` using the `style` function. + +# --hints-- + +test-text + +```js +const div = $('.dashboard div table tbody tr td div')[0]; +assert(div.style.width == '16px' && div.style.height === '16px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-129.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-129.md new file mode 100644 index 00000000000..3c351a7399a --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-129.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca60 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td div')[0].style.backgroundColor === + 'rgb(124, 217, 209)' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-130.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-130.md new file mode 100644 index 00000000000..bace7d9779c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-130.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca61 +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-131.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-131.md new file mode 100644 index 00000000000..e508369e164 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-131.md @@ -0,0 +1,446 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca62 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Set the `text` to a "d function" that returns the value(`d.value`) for each data point. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-132.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-132.md new file mode 100644 index 00000000000..d3f68fb936c --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-132.md @@ -0,0 +1,450 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca63 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Set the `align` attribute to `left` for this selection. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[2] + .getAttribute('align') + .toLowerCase() === 'left' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-133.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-133.md new file mode 100644 index 00000000000..6fe0e8de953 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-133.md @@ -0,0 +1,448 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca64 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const th = $('.dashboard div table thead tr th')[0]; +assert(th.style.position === 'relative' && th.style.left === '20px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-134.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-134.md new file mode 100644 index 00000000000..03e36d189a6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-134.md @@ -0,0 +1,453 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca65 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert(table.style.position === 'relative' && table.style.top === '30px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-135.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-135.md new file mode 100644 index 00000000000..a6c4b6fb870 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-135.md @@ -0,0 +1,464 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca66 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const pieGraph = $('.dashboard div svg')[0]; +assert( + pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-136.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-136.md new file mode 100644 index 00000000000..139d0e87f65 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-136.md @@ -0,0 +1,476 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca67 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. + +Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. + +# --hints-- + +test-text + +```js +assert( + typeof drawDashboard === 'function' && + /<\/script>\s* + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-137.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-137.md new file mode 100644 index 00000000000..a690b7567e6 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-137.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca68 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. + +Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: + +```js +array.findIndex(d => + // find the index where the year passed to + // drawDashboard equals the year of the array +) +``` + +After this, you will be able to use `data[index]` to get that item in the array. + +# --hints-- + +test-text + +```js +assert.match(code,/const index = data.findIndex\(\(?d\)? => (year === d\.year|d.year === year)\s*\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-138.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-138.md new file mode 100644 index 00000000000..054da5d15a2 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-138.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6a +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. + +The five spots are: + +1. The `domain` for `pieColors`. +2. The `data` for `pieGraphData`. +3. The `text` for your pie slice text. +4. The `data` for your `legendRows`. + +# --hints-- + +test-text + +```js +assert( + !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-139.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-139.md new file mode 100644 index 00000000000..5630a5404bb --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-139.md @@ -0,0 +1,482 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: + +```js +.on('mouseover', d => drawDashboard(d)) +``` + +So now, when you hover a label, the function will be called with the year that is being hovered. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\)\)/g + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-140.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-140.md new file mode 100644 index 00000000000..45fd59a633e --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-140.md @@ -0,0 +1,477 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6c +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. + +Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. + +# --hints-- + +test-text + +```js +assert.match(code, /d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-141.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-141.md new file mode 100644 index 00000000000..0c9593756d7 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-141.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6d +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Now when you hover a label, you can see the data for the different years. + +Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. + +To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. + +Here's a hint: + +```js +.style('font', d => d === year ? ) +``` + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg g text')).filter( + (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-142.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-142.md new file mode 100644 index 00000000000..bee3e7b5989 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-142.md @@ -0,0 +1,478 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6e +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/ +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-143.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-143.md new file mode 100644 index 00000000000..0cfeac007dc --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-143.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6f +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg circle')).filter( + (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-144.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-144.md new file mode 100644 index 00000000000..97348bc5be8 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-144.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca70 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. + +After that, you will be able hover any of the circles or year labels to get the information for that year. + +# --hints-- + +test-text + +```js +assert.equal( + code.match( + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/g + )?.length, 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-145.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-145.md new file mode 100644 index 00000000000..3bf1fb49e15 --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-145.md @@ -0,0 +1,494 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca71 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. + +Then, all of the circles will get filled in for the currently displayed year. + +# --hints-- + +test-text + +```js +const circles = Object.values($('.dashboard svg circle')); +assert( + circles.filter( + (el) => + el.getAttribute && + (el.getAttribute('fill') === '#7cd9d1' || + el.getAttribute('fill') === '#f6dd71' || + el.getAttribute('fill') === '#fd9b98') + ).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-146.md b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-146.md new file mode 100644 index 00000000000..d9c3208306e --- /dev/null +++ b/curriculum/challenges/espanol/04-data-visualization/d3-dashboard/step-146.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca72 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. + +That's it, your dashboard is finished! Don't forget to admire your hard work. + +# --hints-- + +test-text + +```js +assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md new file mode 100644 index 00000000000..2b476a4af8d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md @@ -0,0 +1,79 @@ +--- +id: 617b9ad735109e217284e095 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now that you have the primary RGB colors, it's time to combine them. + +For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`. + +# --hints-- + +Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.container { + background-color: rgb(0, 0, 0); + padding: 10px 0; +} +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md new file mode 100644 index 00000000000..95d16b98cd2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md @@ -0,0 +1,95 @@ +--- +id: 617bd6ec666b1da2587e4e37 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta). + +To create chartreuse green, update the `rgb` function in the `.one` rule so that red is at `127`, and set green to the max value. + +For azure, update the `rgb` function in the `.two` rule so that green is at `127` and blue is at the max value. + +And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` rule so that blue is at `127` and red is at the max value. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(127, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 127, 0); +} + +.two { + background-color: rgb(0, 255, 127); +} + +.three { + background-color: rgb(127, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md new file mode 100644 index 00000000000..50b87f01e2e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md @@ -0,0 +1,91 @@ +--- +id: 618a00ed1ca871a2b3aca0cb +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design. + +First, in the rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. Remember that the `rgb` function uses the additive color model, where colors start as black and change as the values of red, green, and blue increase. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(127, 255, 0); +} + +.two { + background-color: rgb(0, 127, 255); +} + +.three { + background-color: rgb(255, 0, 127); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md new file mode 100644 index 00000000000..e38d91fc55c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md @@ -0,0 +1,87 @@ +--- +id: 618a0927005553b74bfa05ae +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +A color wheel is a circle where similar colors, or hues, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange. + +Two colors that are opposite from each other on the color wheel are called complementary colors. If two complementary colors are combined, they produce gray. But when they are placed side-by-side, these colors produce strong visual contrast and appear brighter. + +In the `rgb` function for the `.one` CSS rule, set the red value to the max of `255` to produce pure red. In the `rgb` function for `.two` CSS rule, set the values for green and blue to the max of `255` to produce cyan. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md new file mode 100644 index 00000000000..e8cf1a587a9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md @@ -0,0 +1,87 @@ +--- +id: 618a0b2befb143baefab632b +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background. + +It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page. + +First, in the `h1` rule, use the `rgb` function to set its background color to cyan. + +# --hints-- + +You should not remove or modify the `text-align` property or its value. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); +``` + +Your `h1` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +h1 { + text-align: center; +} +--fcc-editable-region-- + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md new file mode 100644 index 00000000000..bb456dfbecb --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md @@ -0,0 +1,84 @@ +--- +id: 618a1275e873dcc803c2d1aa +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Next, in the `.one` rule, use the `rgb` function to set the `background-color` to black. And in the `.two` rule, use the `rgb` function to set the `background-color` to red. + +# --hints-- + +Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your `.two` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md new file mode 100644 index 00000000000..a48b1d2e04c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md @@ -0,0 +1,82 @@ +--- +id: 618a132676346ac9f7fd59dd +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Notice how your eyes are naturally drawn to the red color in the center? When designing a site, you can use this effect to draw attention to important headings, buttons, or links. + +There are several other important color combinations outside of complementary colors, but you'll learn those a bit later. + +For now, use the `rgb` function in the `.two` rule to set the `background-color` to black. + +# --hints-- + +Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md new file mode 100644 index 00000000000..098865513fe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md @@ -0,0 +1,79 @@ +--- +id: 618a16873520a8d088ffdf44 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +And in the `h1` rule, remove the `background-color` property and value to go back to the default white color. + +# --hints-- + +Your `h1` CSS rule should not have a `background-color` property or value. + +```js +const backgroundColorInstances = code.match(/background-color:.*;/gi); +assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md new file mode 100644 index 00000000000..7dcc15837a7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md @@ -0,0 +1,87 @@ +--- +id: 618a16d21bd3dad1bb3aa8ef +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Now it's time to add other details to the markers, starting with the first one. + +In the first marker `div` element, change the class `one` to `red`. + +# --hints-- + +Your first marker `div` should not have the class `one`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(!containerFirstChild?.classList?.contains('one')); +``` + +Your first marker `div` should have the classes `marker` and `red`. + +```js +const containerFirstChild = [...document.querySelector('.container')?.children][0]; +assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md new file mode 100644 index 00000000000..52d7b6aa55f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md @@ -0,0 +1,89 @@ +--- +id: 619b72a0db211f1c29afb906 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Update the `.one` class selector to target the new `red` class. + +# --hints-- + +Your code should no longer have a `.one` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.one')); +``` + +You should use a class selector to target the class `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')); +``` + +Your `.red` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md new file mode 100644 index 00000000000..3dd82766480 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md @@ -0,0 +1,99 @@ +--- +id: 619b7424f43ec9215e538afe +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`. + +# --hints-- + +Your second marker `div` should not have the class `two`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(!containerSecondChild?.classList?.contains('two')); +``` + +Your second marker `div` should have the classes `marker` and `green`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); +``` + +Your third marker `div` should not have the class `three`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(!containerThirdChild?.classList?.contains('three')); +``` + +Your third marker `div` should have the classes `marker` and `blue`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md new file mode 100644 index 00000000000..425b40bca54 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md @@ -0,0 +1,107 @@ +--- +id: 619b74fa777a2b2473c94f82 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Update the CSS class selector `.two` so it targets the new `green` class. And update the `.three` selector so it targets the new `blue` class. + +# --hints-- + +Your code should no longer have a `.two` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.two')); +``` + +You should use a class selector to target the class `green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')); +``` + +Your `.green` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Your code should no longer have a `.three` class selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.three')); +``` + +You should use a class selector to target the class `blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Your `.blue` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md new file mode 100644 index 00000000000..9e49bcf6171 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md @@ -0,0 +1,81 @@ +--- +id: 619b761916dac02643940022 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +A very common way to apply color to an element with CSS is with hexadecimal or hex values. While hex values sound complicated, they're really just another form of RGB values. + +Hex color values start with a `#` character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, `#4B5320`. + +In the `.green` CSS rule, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue. + +# --hints-- + +Your `.green` CSS rule should have a `background-color` property set to `#00FF00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md new file mode 100644 index 00000000000..4763fcdaf88 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md @@ -0,0 +1,85 @@ +--- +id: 619b7c3c83de403126b69c1e +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +You may already be familiar with decimal, or base 10 values, which go from 0 - 9. Hexadecimal, or base 16 values, go from 0 - 9, then A - F: + +```js +0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F +``` + +With hex colors, `00` is 0% of that color, and `FF` is 100%. So `#00FF00` translates to 0% red, 100% green, and 0% blue, and is the same as `rgb(0, 255, 0)`. + +Lower the intensity of green by setting green value of the hex color to `7F`. + +# --hints-- + +Your `.green` CSS rule should have a `background-color` property set to `#007F00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: #00FF00; +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md new file mode 100644 index 00000000000..2bfa6b0ff03 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md @@ -0,0 +1,87 @@ +--- +id: 619b7fd56aa2253778bcf5f7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The HSL color model, or hue, saturation, and lightness, is another way to represent colors. + +The CSS `hsl` function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness. + +If you imagine a color wheel, the hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees. + +Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. + +Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral. + +In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. + +# --hints-- + +Your `.blue` CSS rule should have a `background-color` property set to `hsl(240, 100%, 50%)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.green { + background-color: #007F00; +} + +--fcc-editable-region-- +.blue { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md new file mode 100644 index 00000000000..9c38a228176 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -0,0 +1,83 @@ +--- +id: 61a489b8579e87364b2d2cdb +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You've learned a few ways to set flat colors in CSS, but you can also use a color transition, or gradient, on an element. + +A gradient is when one color transitions into another. The CSS `linear-gradient` function lets you control the direction of the transition along a line, and which colors are used. + +One thing to remember is that the `linear-gradient` function actually creates an `image` element, and is usually paired with the `background` property which can accept an image as a value. + +In the `.red` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `rgb(255, 0, 0)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:rgb\(255,0,0\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md new file mode 100644 index 00000000000..11fab401a2a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md @@ -0,0 +1,87 @@ +--- +id: 61a493ead935c148d2b76312 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +The `linear-gradient` function is very flexible -- here is the basic syntax you'll use in this tutorial: + +```css +linear-gradient(gradientDirection, color1, color2, ...); +``` + +`gradientDirection` is the direction of the line used for the transition. `color1` and `color2` are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, `rgb`, or `hsl`. + +Now you'll apply a red-to-green gradient along a 90 degree line to the first marker. + +First, in the `.red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md new file mode 100644 index 00000000000..58182d2fc51 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md @@ -0,0 +1,79 @@ +--- +id: 61a498399534644f59cff05e +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +As you can see, the `linear-gradient` function produced a smooth red-green gradient. While the `linear-gradient` function needs a minimum of two color arguments to work, it can accept many color arguments. + +Use the `rgb` function to add pure blue as the third color argument to the `linear-gradient` function. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md new file mode 100644 index 00000000000..45ff19cb687 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md @@ -0,0 +1,85 @@ +--- +id: 61a49d15bdbb5e57cc6fd280 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function. + +For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space: + +```css +linear-gradient(90deg, red 90%, black); +``` + +In the `linear-gradient` function, add a `75%` color stop after the first red color argument. Do not add color stops to the other colors arguments. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md new file mode 100644 index 00000000000..581cf6cabad --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md @@ -0,0 +1,79 @@ +--- +id: 61a4a53c4459446dc134a1c6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Now that you know the basics of how the `linear-gradient` function and color-stops work, you can use them to make the markers look more realistic. + +In the `linear-gradient` function, set `gradientDirection` to `180deg`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md new file mode 100644 index 00000000000..1827f04e183 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md @@ -0,0 +1,77 @@ +--- +id: 61a4a6e908bc34725b4c25ac +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Next, set the color-stop for red to `0%`, the color-stop for green to `50%`, and the color-stop for blue to `100%`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md new file mode 100644 index 00000000000..6ee6ce62d75 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md @@ -0,0 +1,79 @@ +--- +id: 61a4a7877da33a73a1c1723e +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now that the color-stops are set, you'll apply different shades of red to each color argument in the `linear-gradient` function. The shades on the top and bottom edges of the marker will be darker, while the one in the middle will be lighter, as if there's a light above it. + +For the first color argument, which is currently pure red, update the `rgb` function so the value for red is `122`, the value for green is `74`, and the value for blue is `14`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md new file mode 100644 index 00000000000..97b5ca11806 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md @@ -0,0 +1,79 @@ +--- +id: 61a4ac092eb21e7dbfe61c33 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Now modify the second color argument in the `linear-gradient` function, which is currently pure green. + +Update the `rgb` function so the value for red is `245`, the value of green is `62`, and the value of blue is `113`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md new file mode 100644 index 00000000000..07a9a5fe232 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md @@ -0,0 +1,79 @@ +--- +id: 61a4acbb5587197f68544d00 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Finally, modify the third color argument in the `linear-gradient` function, which is currently pure blue. + +Update the `rgb` function so the value for red is `162`, the value of green is `27`, and the value of blue is `27`. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md new file mode 100644 index 00000000000..b47093c3cc9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -0,0 +1,79 @@ +--- +id: 61a4ada3aabeec822b2975d9 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +The red marker is looking much more realistic. Now you'll do the same for the green marker, using a combination of the `linear-gradient` function and hex colors. + +In the `.green` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.green` CSS rule should have a `background` property with the value `#007F00`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:#007F00/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background-color: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md new file mode 100644 index 00000000000..64460fa49cf --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md @@ -0,0 +1,79 @@ +--- +id: 61a4ae5f29eb5584187201c3 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +For this marker, you'll use hex color codes for your gradient. + +Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And for the first color argument, use a hex color code with the values `55` for red, `68` for green, and `0D` for blue. + +# --hints-- + +Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md new file mode 100644 index 00000000000..6a5b0ec85b5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md @@ -0,0 +1,79 @@ +--- +id: 61a5be9833e7dc178de2af10 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +That's looking better, but the bottom edge of the green marker needs to be darker to add a little more dimension. + +In the same `linear-gradient` function, add a hex color code with the values `11` for red, `6C` for green, and `31` for blue as the third color argument. + +# --hints-- + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D, #71F53E); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md new file mode 100644 index 00000000000..8fb1fa454fa --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md @@ -0,0 +1,81 @@ +--- +id: 61a5bfe091060f1d6a629dd0 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Even without the color-stops, you might have noticed that the colors for the green marker transition at the same points as the red marker. The first color is at the start (0%), the second is in the middle (50%), and the last is at the end (100%) of the gradient line. + +The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default. + +In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md new file mode 100644 index 00000000000..fd4c58c74d3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md @@ -0,0 +1,91 @@ +--- +id: 61a5c906ab73313316e342f0 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +If no `gradientDirection` argument is provided to the `linear-gradient` function, it arranges colors from top to bottom, or along a 180 degree line, by default. + +Clean up your code a little more by removing the `gradientDirection` argument from both `linear-gradient` functions. + +# --hints-- + +You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules. + +```js +assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); +``` + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md new file mode 100644 index 00000000000..66bf66e3953 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -0,0 +1,79 @@ +--- +id: 61a5ca57f50ded36d33eef96 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments. + +In the `.blue` CSS rule, change the `background-color` property to `background`. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background-color: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md new file mode 100644 index 00000000000..e042a3e9157 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md @@ -0,0 +1,77 @@ +--- +id: 61a5d594b887335228ee6533 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Use the `linear-gradient` function, and pass in the `hsl` function with the values `186` for hue, `76%` for saturation, and `16%` for lightness as the first color argument. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md new file mode 100644 index 00000000000..e54181b512b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md @@ -0,0 +1,77 @@ +--- +id: 61a5d6701ee08953ca375243 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +As the second color argument, pass in the `hsl` function with the values `223` for hue, `90%` for saturation, and `60%` for lightness. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md new file mode 100644 index 00000000000..ed015ce3a31 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md @@ -0,0 +1,77 @@ +--- +id: 61a5d79c858bef560e26c685 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +And as the third color argument, pass in the `hsl` function with the values `240` for hue, `56%` for saturation, and `42%` for lightness. + +# --hints-- + +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md new file mode 100644 index 00000000000..468ff526265 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md @@ -0,0 +1,87 @@ +--- +id: 61a5d7ef1cfcf45764df07a2 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. + +Inside the red marker `div`, create a new `div` and give it a class of `sleeve`. + +# --hints-- + +Your new `div` element should be within the red marker's `div` element. + +```js +const redMarkerChildren = [...document.querySelector('.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); +``` + +Your new `div` element should have a class of `sleeve`. + +```js +const redMarkerChild = [...document.querySelector('.red')?.children][0]; +assert(redMarkerChild?.classList?.contains('sleeve')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md new file mode 100644 index 00000000000..785fe4028ed --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md @@ -0,0 +1,92 @@ +--- +id: 61adc60b69cd4b87739d2174 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`. + +# --hints-- + +You should use a class selector to target class `sleeve`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); +``` + +Your `.sleeve` CSS rule should have a `width` property set to `110px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px'); +``` + +Your `.sleeve` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md new file mode 100644 index 00000000000..8240849364e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md @@ -0,0 +1,98 @@ +--- +id: 61adc91467b5d59328b9f781 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +In the last project, you learned a little bit about borders and the `border-color` property. + +All HTML elements have borders, though they're usually set to `none` by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style. + +In the `.sleeve` CSS rule, add the `border-left-width` property with the value `10px`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-width` property and with the value `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md new file mode 100644 index 00000000000..4497f5b12a5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md @@ -0,0 +1,97 @@ +--- +id: 61add79e739a5faee9d96080 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Borders have several styles to choose from. You can make your border a solid line, but you can also use a dashed or dotted line if you prefer. Solid border lines are probably the most common. + +In the `.sleeve` CSS rule, add the `border-left-style` property with the value `solid`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-style` property and with the value `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md new file mode 100644 index 00000000000..4228e9d56d3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md @@ -0,0 +1,100 @@ +--- +id: 61add929e41980b1edbdba7e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Your border should be visible now. If no color is set, black is used by default. + +But to make your code more readable, it's better to set the border color explicitly. + +In the `.sleeve` CSS rule, add the `border-left-color` property with the value `black`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left-color` property and with the value `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md new file mode 100644 index 00000000000..68da86499e6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md @@ -0,0 +1,123 @@ +--- +id: 61addaf7e83988b59a7d18ff +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +The `border-left` shorthand property lets you to set the left border's width, style, and color at the same time. + +Here is the syntax: + +```css +border-left: width style color; +``` + +In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same. + +# --hints-- + +Your `.sleeve` CSS rule should not have a `border-left-width` property and value. + +```js +assert(!/border-left-width/g.test(code)); +``` + +Your `.sleeve` CSS rule should not have a `border-left-style` property and value. + +```js +assert(!/border-left-style/g.test(code)); +``` + +Your `.sleeve` CSS rule should not have a `border-left-color` property and value. + +```js +assert(!/border-left-color/g.test(code)); +``` + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px solid black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; + border-left-color: black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md new file mode 100644 index 00000000000..1bb9b99acd1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md @@ -0,0 +1,97 @@ +--- +id: 61ade49b2dad60c076cbd32d +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Your marker is looking good. But to make it look even more realistic, you can change the border style to double solid borders. + +For the `border-left` shorthand property, change the border style value from `solid` to `double`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px solid black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md new file mode 100644 index 00000000000..abe6ce28aac --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md @@ -0,0 +1,85 @@ +--- +id: 61b092eb9e7fc020b43b1bb2 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +To make the marker look more realistic, give the sleeve a transparent white color. + +First, set the sleeve element's `background-color` to `white`. + +# --hints-- + +Your `.sleeve` CSS rule should have a `background-color` property set to `white`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md new file mode 100644 index 00000000000..d8d0fba99d4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md @@ -0,0 +1,88 @@ +--- +id: 61b093179e7fc020b43b1bb3 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Opacity describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side. + +With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value `0`, or 0%, the element will be completely transparent, and at `1.0`, or 100%, the element will be completely opaque like it is by default. + +In the `.sleeve` CSS rule, set the `opacity` property to `0.5`. + +# --hints-- + +Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md new file mode 100644 index 00000000000..dd190a3b423 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md @@ -0,0 +1,89 @@ +--- +id: 61b093219e7fc020b43b1bb4 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Another way to set the opacity for an element is with the alpha channel. Similar to the `opacity` property, the alpha channel controls how transparent or opaque a color is. + +You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties. + +Inside the `.sleeve` rule, remove the `opacity` property and value. + +# --hints-- + +Your `.sleeve` CSS rule should not have an `opacity` property and value. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; + opacity: 0.5; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md new file mode 100644 index 00000000000..165de21342f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md @@ -0,0 +1,92 @@ +--- +id: 61b093329e7fc020b43b1bb5 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead. + +The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel: + +```css +rgba(redValue, greenValue, blueValue, alphaValue); +``` + +In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity. + +# --hints-- + +Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md new file mode 100644 index 00000000000..b60979b8676 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md @@ -0,0 +1,103 @@ +--- +id: 61b093429e7fc020b43b1bb6 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right. + +Add a new `div` with the class `cap` before the sleeve `div` element. + +# --hints-- + +Your new `div` element should be within the red marker `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); +``` + +Your new `div` element should have a class of `cap`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); +``` + +Your cap `div` should be before the sleeve `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +const cap = document.querySelector('div.cap'); +const sleeve = document.querySelector('div.sleeve'); +assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md new file mode 100644 index 00000000000..4791648d18e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md @@ -0,0 +1,99 @@ +--- +id: 61b0934c9e7fc020b43b1bb7 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. + +# --hints-- + +You should use a class selector to target the class `cap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')); +``` + +Your `.cap` CSS rule should have a `width` property set to `60px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); +``` + +Your `.cap` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md new file mode 100644 index 00000000000..ac1b7377b3f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md @@ -0,0 +1,104 @@ +--- +id: 61b0936d9e7fc020b43b1bb8 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. + +This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. + +To position two `div` elements on the same line, set their `display` properties to `inline-block`. + +Create a new rule to target both the `cap` and `sleeve` classes, and set `display` to `inline-block`. + +# --hints-- + +You should use a class selector to target both the `cap` and `sleeve` classes. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); +``` + +Your CSS rule should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md new file mode 100644 index 00000000000..5fd0daa51b9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md @@ -0,0 +1,79 @@ +--- +id: 61b095989e7fc020b43b1bb9 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +You'll use the `rgb` function for the colors of this gradient. + +In the `linear-gradient` function, use the `rgb` function to set the first color argument to pure red. + +# --hints-- + +Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md new file mode 100644 index 00000000000..48a75db6e2c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md @@ -0,0 +1,79 @@ +--- +id: 61b095a79e7fc020b43b1bba +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You won't see gradient yet because the `linear-gradient` function needs at least two color arguments to work. + +In the same `linear-gradient` function, use the `rgb` function to set the second color argument to pure green. + +# --hints-- + +Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md new file mode 100644 index 00000000000..f12ed48d45e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md @@ -0,0 +1,77 @@ +--- +id: 61b095c79e7fc020b43b1bbb +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +For the second color argument, use a hex color code with the values `71` for red, `F5` for green, and `3E` for blue. + +# --hints-- + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md new file mode 100644 index 00000000000..c3168768e80 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md @@ -0,0 +1,97 @@ +--- +id: 61b09f739aa6572d2064f9b8 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border. + +For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity. + +# --hints-- + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md new file mode 100644 index 00000000000..b87a6ef2fcf --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md @@ -0,0 +1,123 @@ +--- +id: 61b0a1b2af494934b7ec1a72 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers. + +Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers. + +# --hints-- + +Your green marker `div` should contain two `div` elements. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); +``` + +Your green marker's cap `div` element should be before the sleeve `div` element. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +const greenMarkerCap = document.querySelector('.green .cap'); +const greenMarkerSleeve = document.querySelector('.green .sleeve'); +assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); +``` + +Your blue marker `div` should contain two `div` elements. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); +``` + +Your blue marker's cap `div` element should be before the sleeve `div` element. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +const blueMarkerCap = document.querySelector('.blue .cap'); +const blueMarkerSleeve = document.querySelector('.blue .sleeve'); +assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md new file mode 100644 index 00000000000..b7062baf610 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md @@ -0,0 +1,109 @@ +--- +id: 61b0a44a6b865738ba49b9fb +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +The last thing you'll do is add a slight shadow to each marker to make them look even more realistic. + +The `box-shadow` property lets you apply one or more shadows around an element. Here is basic syntax: + +```css +box-shadow: offsetX offsetY color; +``` + +Start by adding a simple shadow to the red marker. + +In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md new file mode 100644 index 00000000000..63e7f372ae1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md @@ -0,0 +1,104 @@ +--- +id: 61b306305810f1c9040ce5a2 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down. + +But what if you wanted to position your shadow on the opposite side? You can do that by using negative values for `offsetX` and `offsetY`. + +Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 5px 5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md new file mode 100644 index 00000000000..3ec43b720fa --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md @@ -0,0 +1,108 @@ +--- +id: 61b30995968123ceb6b76167 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Notice that the edges of the shadow are sharp. This is because there is an optional `blurRadius` value for the `box-shadow` property: + +```css +box-shadow: offsetX offsetY blurRadius color; +``` + +If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is. + +In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px` for `blurRadius`, and `green` for `color`. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px 5px green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md new file mode 100644 index 00000000000..9b91e0184d5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md @@ -0,0 +1,111 @@ +--- +id: 61b30a286c228bd0c493c09a +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +But what if you wanted to expand the shadow out further? You can do that with the optional `spreadRadius` value: + +```css +box-shadow: offsetX offsetY blurRadius spreadRadius color; +``` + +Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included. + +Practice by adding a 5 pixel shadow directly around the blue marker. + +In the `.blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0` for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`. + +# --hints-- + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 0 5px blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md new file mode 100644 index 00000000000..b87a5548dcd --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md @@ -0,0 +1,104 @@ +--- +id: 61b31287fb580ae75a486047 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker. + +In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md new file mode 100644 index 00000000000..da0027fff13 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md @@ -0,0 +1,104 @@ +--- +id: 61b315e76a63b3ecbbb11b75 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Next, update the `color` value of the red marker's `box-shadow` property. + +Replace the named color with the `rgba` function. Use the values `83` for red, `14` for green, `14` for blue and `0.8` for the alpha channel. + +# --hints-- + +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md new file mode 100644 index 00000000000..1cc0c1b3591 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md @@ -0,0 +1,110 @@ +--- +id: 61b3183655ec10efd8c0bb07 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors. + +In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); +``` + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md new file mode 100644 index 00000000000..8750e8fc2ed --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md @@ -0,0 +1,102 @@ +--- +id: 61b31a451057fff645ec09be +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +For the green marker's `box-shadow` property, replace the named color with a hex color code. Use the values `3B` for red, `7E` for green, `20` for blue, and `CC` for the alpha channel. + +# --hints-- + +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 #3B7E20CC`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 green; +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md new file mode 100644 index 00000000000..8a9dc372ba6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md @@ -0,0 +1,184 @@ +--- +id: 61b31cd7b0c76bfc076b4719 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Finally, for the blue marker's `box-shadow` property, replace the named color with the `hsla` function. Use the values `223` for hue, `59%` for saturation, `31%` for lightness, and `0.8` for the alpha channel. + +And with that, your set of colored markers is complete! Well done. + +# --hints-- + +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md new file mode 100644 index 00000000000..2d083077ee1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md @@ -0,0 +1,135 @@ +--- +id: 61437d575fb98f57fa8f7f36 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Begin with your standard HTML boilerplate. Add a `DOCTYPE` declaration, an `html` element specifying this page is in English, a `head` element, and a `body` element. + +Add a `` tag with the appropriate `charset` and a `` tag for mobile responsiveness within the `head` element. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +You should have an opening `` tag, and it should have `lang` of `en`. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +The other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md new file mode 100644 index 00000000000..7f6d7239c43 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md @@ -0,0 +1,96 @@ +--- +id: 614385513d91ae5c251c2052 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add a `title` element with the text `Magazine`, a `link` element for the `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap` font stylesheet, a `link` for the `https://use.fontawesome.com/releases/v5.8.2/css/all.css` FontAwesome stylesheet, and a `link` for your `./styles.css` stylesheet. + +Your font stylesheet will load three separate fonts: `Anton`, `Baskervville`, and `Raleway`. + +# --hints-- + +Your code should have three self-closing `link` elements. + +```js +assert(document.querySelectorAll('link').length === 3); +``` + +Your `link` element should be within your `head` element. + +```js +assert(document.querySelectorAll('head > link').length === 3); +``` + +Your three `link` elements should have a `rel` attribute with the value `stylesheet`. + +```js +const links = [...document.querySelectorAll('link')]; +assert(links.every(link => link.getAttribute('rel') === 'stylesheet')); +``` + +One of your link elements should have the `href` set to `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap`. + +```js +const links = [...document.querySelectorAll('link')]; +assert(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap')); +``` + +One of your link elements should have the `href` set to `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +```js +const links = [...document.querySelectorAll('link')]; +assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')); +``` + +One of your `link` elements should have an `href` attribute with the value `styles.css`. + +```js +assert.match(code, / + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md new file mode 100644 index 00000000000..e911ec286f1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md @@ -0,0 +1,75 @@ +--- +id: 6143862a5e54455d262c212e +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Within your `body`, create a `main` element. Then in that element, create a `section` with a `class` set to `heading`. + +# --hints-- + +You should have a `main` element. + +```js +assert.exists(document.querySelector('main')); +``` + +Your `main` element should be within your `body` element. + +```js +assert(document.querySelector('main')?.parentElement?.localName === 'body'); +``` + +You should have a `section` element. + +```js +assert.exists(document.querySelector('section')); +``` + +Your `section` element should be within your `main` element. + +```js +assert(document.querySelector('section')?.parentElement?.localName === 'main'); +``` + +Your `section` element should have the `class` set to `heading`. + +```js +assert(document.querySelector('section')?.classList?.contains('heading')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md new file mode 100644 index 00000000000..dc28dc079b9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md @@ -0,0 +1,109 @@ +--- +id: 6143869bb45bd85e3b1926aa +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Within your `.heading` element, create a `header` element with the `class` set to `hero`. + +In that element, create an `img` element with the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, the `alt` set to `freecodecamp logo`, and the `class` set to `hero-img`. + +The `loading` attribute on an `img` element can be set to `lazy` to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load. + +Give your new `img` element a `loading` attribute set to `lazy`. + +# --hints-- + +You should create a `header` element. + +```js +assert.exists(document.querySelector('header')); +``` + +Your `header` element should be within your `.heading` element. + +```js +assert(document.querySelector('header')?.parentElement?.className === 'heading'); +``` + +Your `header` element should have the `class` set to `hero`. + +```js +assert(document.querySelector('header')?.className === 'hero'); +``` + +You should create an `img` element. + +```js +assert.exists(document.querySelector('img')); +``` + +Your `img` element should be within your `header` element. + +```js +assert(document.querySelector('img')?.parentElement?.localName === 'header'); +``` + +Your `img` element should have the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`. + +```js +assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png'); +``` + +Your `img` element should have the `alt` set to `freecodecamp logo`. + +```js +assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo'); +``` + +Your `img` element should have the `loading` attribute set to `lazy`. + +```js +assert(document.querySelector('img')?.getAttribute('loading') === 'lazy'); +``` + +Your `img` element should have the `class` set to `hero-img`. + +```js +assert(document.querySelector('img')?.className === 'hero-img'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- +
+
+ +
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md new file mode 100644 index 00000000000..535295bcae3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md @@ -0,0 +1,152 @@ +--- +id: 614387cbefeeba5f3654a291 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +After your `header` element, create a `div` with the `class` set to `author`. + +Within that `div`, create a `p` element with the `class` set to `author-name` and give it the text `By freeCodeCamp`. Wrap the `freeCodeCamp` portion in an `a` element with the `href` set to `https://freecodecamp.org`, and the `target` set to `_blank`. + + +Below that, add a second `p` element with the class `publish-date` and the text `March 7, 2019`. + +# --hints-- + +You should create a new `div` element. + +```js +assert.exists(document.querySelector('div')); +``` + +Your `div` element should come after your `header` element. + +```js +assert(document.querySelector('div')?.previousElementSibling?.localName === 'header'); +``` + +Your `div` element should have the `class` set to `author`. + +```js +assert(document.querySelector('div')?.className === 'author'); +``` + +You should create two new `p` elements. + +```js +assert(document.querySelectorAll('p')?.length === 3); +``` + +Your two new `p` elements should be within your `div` element. + +```js +assert.exists(document.querySelector('div')?.querySelectorAll('p')?.length === 2); +``` + +Your first new `p` element should have a `class` set to `author-name`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.className === 'author-name'); +``` + +Your first new `p` element should have the text `By freeCodeCamp`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.innerText === 'By freeCodeCamp'); +``` + +Your second new `p` element should have a `class` set to `publish-date`. + +```js +assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.className === 'publish-date'); +``` + +Your second new `p` element should have the text `March 7, 2019`. + +```js +assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.innerText === 'March 7, 2019'); +``` + +You should create a new `a` element. + +```js +assert.exists(document.querySelector('a')); +``` + +Your `a` element should be within your first new `p` element. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.localName === 'a'); +``` + +Your `a` element should have the `href` set to `https://freecodecamp.org`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('href') === 'https://freecodecamp.org'); +``` + +Your `a` element should have the `target` set to `_blank`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('target') === '_blank'); +``` + +Your `a` element should surround the text `freeCodeCamp`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.textContent === 'freeCodeCamp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+--fcc-editable-region-- + +
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md new file mode 100644 index 00000000000..44fe6eb8cb4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md @@ -0,0 +1,134 @@ +--- +id: 614389f601bb4f611db98563 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below your `.author` element, create a new `div` element with the class `social-icons`. + +Add five `a` elements within that new `div`, and give them the following `href` attributes. + +- The first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. +- The second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. +- The third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. +- The fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. +- The fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div')?.length === 2); +``` + +Your new `div` element should come after your `.author` element. + +```js +assert(document.querySelector('.author')?.nextElementSibling?.localName === 'div'); +``` + +Your new `div` element should have the class `social-icons`. + +```js +assert(document.querySelector('.author')?.nextElementSibling?.classList?.contains('social-icons')); +``` + +Your `.social-icons` element should have five `a` elements. + +```js +assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.length === 5); +``` + +Your first `a` element should have an `href` set to `https://www.facebook.com/freecodecamp`. + +```js +assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getAttribute('href')?.includes('https://www.facebook.com/freecodecamp')); +``` + +Your second `a` element should have an `href` set to `https://twitter.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp'); +``` + +Your third `a` element should have an `href` set to `https://instagram.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp'); +``` + +Your fourth `a` element should have an `href` set to `https://www.linkedin.com/school/free-code-camp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp'); +``` + +Your fifth `a` element should have an `href` set to `https://www.youtube.com/freecodecamp`. + +```js +assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md new file mode 100644 index 00000000000..d2757106fda --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md @@ -0,0 +1,139 @@ +--- +id: 61438b5b66d76a6264430f2a +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Within each of your new `a` elements, add an `i` element and give them the following classes: + +- Your first `i` element should have the class `fab fa-facebook-f` +- Your second `i` element should have the class `fab fa-twitter` +- Your third `i` element should have the class `fab fa-instagram` +- Your fourth `i` element should have the class `fab fa-linkedin-in` +- Your fifth `i` element should have the class `fab fa-youtube` + +# --hints-- + +You should have five `i` elements. + +```js +assert(document.querySelectorAll('i')?.length === 5); +``` + +Each `a` element should only have one `i` element. + +```js +const aaaaa = [...document.querySelectorAll('.social-icons a')]; +assert(aaaaa?.every(a => a?.children?.length === 1 && a?.children?.[0]?.localName === 'i')); +``` + +Each `i` element should have a `class` attribute which includes `fab`. + +```js +const iiiii = [...document.querySelectorAll('i')]; +assert(iiiii?.every(i => i?.classList?.contains('fab'))); +``` + +The first `i` element should have a `class` attribute which includes `fa-facebook-f`. + +```js +assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f')); +``` + +The second `i` element should have a `class` attribute which includes `fa-twitter`. + +```js +assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter')); +``` + +The third `i` element should have a `class` attribute which includes `fa-instagram`. + +```js +assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram')); +``` + +The fourth `i` element should have a `class` attribute which includes `fa-linkedin-in`. + +```js +assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in')); +``` + +The fifth `i` element should have a `class` attribute which includes `fa-youtube`. + +```js +assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md new file mode 100644 index 00000000000..9fec7159374 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md @@ -0,0 +1,129 @@ +--- +id: 61438ec09438696391076d6a +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below your `.heading` element, create a new `section` element with the `class` set to `text`. Within that, create a `p` element with the `class` set to `first-paragraph` and the following text: + +```markup +Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +``` + +# --hints-- + +You should create a new `section` element. + +```js +assert(document.querySelectorAll('section')?.length === 2); +``` + +Your new `section` element should come after your `.heading` element. + +```js +assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading'); +``` + +Your new `section` element should have the `class` set to `text`. + +```js +assert(document.querySelectorAll('section')?.[1]?.className === 'text'); +``` + +You should create a new `p` element within your `.text` element. + +```js +assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1); +``` + +Your new `p` element should have the `class` set to `first-paragraph`. + +```js +assert(document.querySelector('.text p')?.className === 'first-paragraph'); +``` + +Your new `p` element should have the provided text. + +```js +assert(document.querySelector('.first-paragraph')?.innerText === 'Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you\'ll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md new file mode 100644 index 00000000000..4f19487816b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md @@ -0,0 +1,109 @@ +--- +id: 61439dc084fa5f659cf75d7c +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Create another `p` element below your `.first-paragraph` element, and give it the following text: + +```markup +After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +``` + +# --hints-- + +You should create a second `p` element within your `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 2) +``` + +Your second `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[1]?.innerText === 'After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--fcc-editable-region-- +
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+
+--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md new file mode 100644 index 00000000000..f4ee0bb5ab3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md @@ -0,0 +1,113 @@ +--- +id: 61439dfc811e12666b04be6f +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add a third `p` element at the end of your `.text` element, and give it the following text: + +```markup +It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +``` + +# --hints-- + +You should create a third `p` element in your `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 3); +``` + +Your third `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[2]?.innerText === "It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md new file mode 100644 index 00000000000..7f654bcc95c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md @@ -0,0 +1,148 @@ +--- +id: 61439e33e4fb7967609e0c83 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +After the three `p` elements within your `.text` element, create a `blockquote` element. Within that, add an `hr` element, a `p` element with the `class` set to `quote`, and a second `hr` element. + +Give the `.quote` element the text `The entire curriculum should be a series of projects`. + +# --hints-- + +You should create a new `blockquote` element within your `.text` element. + +```js +assert.exists(document.querySelector('.text blockquote')); +``` + +Your `blockquote` element should come after your three `p` elements. + +```js +assert(document.querySelector('.text')?.children?.[3]?.localName === 'blockquote'); +``` + +Your `blockquote` element should have two `hr` elements. + +```js +assert(document.querySelectorAll('.text blockquote hr')?.length === 2); +``` + +Your `blockquote` element should have a `p` element. + +```js +assert.exists(document.querySelector('.text blockquote p')); +``` + +Your `blockquote` children should be in the correct order. + +```js +const children = document.querySelector('.text blockquote')?.children; +assert(children?.[0]?.localName === 'hr'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'hr'); +``` + +Your new `p` element should have the `class` set to `quote`. + +```js +assert(document.querySelector('.text blockquote p')?.className === 'quote'); +``` + +Your new `p` element should have the text `The entire curriculum should be a series of projects`. + +```js +assert(document.querySelector('.text blockquote p')?.innerText === 'The entire curriculum should be a series of projects'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md new file mode 100644 index 00000000000..db32dfa57dc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md @@ -0,0 +1,130 @@ +--- +id: 6143a1a228f7d068ab16a130 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Below your `blockquote` element, add another `p` element with the following text: + +```markup +No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +``` + +# --hints-- + +You should add a fourth `p` element to your `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 5); +``` + +Your new `p` element should come after your `blockquote` element. + +```js +assert(document.querySelectorAll('.text p')?.[4]?.previousElementSibling?.localName === 'blockquote'); +``` + +Your new `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[4]?.innerText === 'No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there\'s plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md new file mode 100644 index 00000000000..7500f1b4667 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md @@ -0,0 +1,128 @@ +--- +id: 6143a73279ce6369de4b9bcc +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Create a fifth `p` element at the end of your `.text` element, and give it the following text: + +```markup +The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +``` + +# --hints-- + +You should add a fifth `p` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 6); +``` + +Your new `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[5]?.innerText === 'The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md new file mode 100644 index 00000000000..250303e45c1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md @@ -0,0 +1,135 @@ +--- +id: 6143a778bffc206ac6b1dbe3 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Create one final `p` element at the end of your `.text` element and give it the following text: + +```markup +Instead of a series of coding challenges, people will be in their code +editor passing one test after another, quickly building up a project. +People will get into a real flow state, similar to what they +experience when they build the required projects at the end of each +certification. They'll get that sense of forward progress right from +the beginning. And freeCodeCamp will be a much smoother experience. +``` + +# --hints-- + +You should add a sixth `p` element to the `.text` element. + +```js +assert(document.querySelectorAll('.text p')?.length === 7) +``` + +Your sixth `p` element should have the provided text. + +```js +assert(document.querySelectorAll('.text p')?.[6]?.innerText === 'Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They\'ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+--fcc-editable-region-- +
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+
+--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md new file mode 100644 index 00000000000..b1af2f717d8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md @@ -0,0 +1,166 @@ +--- +id: 6143a83fcc32c26bcfae3efa +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Below your `.text` element, create a new `section` element and give it a `class` of `text text-with-images`. Within that, create an `article` element with a `class` set to `brief-history`, and an `aside` element with the `class` set to `image-wrapper`. + +# --hints-- + +You should create a new `section` element. + +```js +assert(document.querySelectorAll('section')?.length === 3) +``` + +Your new `section` element should come after your `.text` element. + +```js +assert(document.querySelectorAll('section')?.[2]?.previousElementSibling?.className === 'text') +``` + +Your new `section` element should have the `class` set to `text text-with-images`. + +```js +assert(document.querySelectorAll('section')?.[2]?.className === 'text text-with-images') +``` + +Your new `section` element should have an `article` element. + +```js +assert.exists(document.querySelector('.text-with-images article')); +``` + +Your new `section` element should have an `aside` element. + +```js +assert.exists(document.querySelector('.text-with-images aside')); +``` + +The `article` element should come before the `aside` element. + +```js +assert(document.querySelector('.text-with-images article')?.nextElementSibling?.localName === 'aside'); +``` + +Your `article` element should have the `class` set to `brief-history`. + +```js +assert(document.querySelector('.text-with-images article')?.className === 'brief-history'); +``` + +Your `aside` element should have the `class` set to `image-wrapper`. + +```js +assert(document.querySelector('.text-with-images aside')?.className === 'image-wrapper'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md new file mode 100644 index 00000000000..f8148bc77f8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md @@ -0,0 +1,174 @@ +--- +id: 6143b97c06c3306d23d5da47 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Within your `article` element, create an `h3` element with the `class` set to `list-title` and the text of `A Brief History`. Below that, create a `p` element with the text `Of the Curriculum`. Then create a `ul` element with the class `lists`. + +# --hints-- + +You should create an `h3` element within your `article` element. + +```js +assert.exists(document.querySelector('article h3')); +``` + +You should create a `p` element within your `article` element. + +```js +assert.exists(document.querySelector('article p')); +``` + +You should create a `ul` element within your `article` element. + +```js +assert.exists(document.querySelector('article ul')); +``` + +Your elements within the `article` element should be in the correct order. + +```js +const children = document.querySelector('article')?.children; +assert(children?.[0]?.localName === 'h3'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'ul'); +``` + +Your new `h3` element should have the `class` set to `list-title`. + +```js +assert(document.querySelector('article h3')?.className === 'list-title'); +``` + +Your new `h3` element should have the text of `A Brief History`. + +```js +assert(document.querySelector('article h3')?.innerText === 'A Brief History'); +``` + +Your new `p` element should have the text of `Of the Curriculum`. + +```js +assert(document.querySelector('article p')?.innerText === 'Of the Curriculum'); +``` + +Your new `ul` element should have the `class` set to `lists`. + +```js +assert(document.querySelector('article ul')?.className === 'lists'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md new file mode 100644 index 00000000000..b6b2d1bd906 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md @@ -0,0 +1,228 @@ +--- +id: 6143b9e1f5035c6e5f2a8231 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Within your `ul` element, create six `li` elements. Add an `h4` element with a `class` set to `list-subtitle` and a `p` element to each of your `li` elements. + +Then give the `h4` and `p` elements the following text content, in order, with each `h4` using what's on the left side of the colon, and each `p` using what's on the right: + +- `V1 - 2014`: `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` +- `V2 - 2015`: `We added interactive algorithm challenges.` +- `V3 - 2015`: `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` +- `V4 - 2016`: `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.` +- `V5 - 2017`: `We added the back end and data visualization challenges.` +- `V6 - 2018`: `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` + +# --hints-- + +Your `ul` element should have six `li` elements. + +```js +assert(document.querySelectorAll('.lists li')?.length === 6); +``` + +Each of your new `li` elements should have an `h4` and `p` element. + +```js +const lis = [...document.querySelectorAll('.lists li')]; +assert(lis?.every(li => li?.children?.[0]?.localName === 'h4' && li?.children?.[1]?.localName === 'p')); +``` + +Your first `h4` should have the text `V1 - 2014`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[0]?.innerText === 'V1 - 2014'); +``` + +Your first `p` should have the text `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.` + +```js +assert(document.querySelectorAll('.lists li p')?.[0]?.innerText === 'We launched freeCodeCamp with a simple list of 15 resources, including Harvard\'s CS50 and Stanford\'s Database Class.'); +``` + +Your second `h4` should have the text `V2 - 2015`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[1]?.innerText === 'V2 - 2015'); +``` + +Your second `p` should have the text `We added interactive algorithm challenges.` + +```js +assert(document.querySelectorAll('.lists li p')?.[1]?.innerText === 'We added interactive algorithm challenges.'); +``` + +Your third `h4` should have the text `V3 - 2015`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[2]?.innerText === 'V3 - 2015'); +``` + +Your third `p` should have the text `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).` + +```js +assert(document.querySelectorAll('.lists li p')?.[2]?.innerText === 'We added our own HTML+CSS challenges (before we\'d been relying on General Assembly\'s Dash course for these).'); +``` + +Your fourth `h4` should have the text `V4 - 2016`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016'); +``` + +Your fourth `p` should have the text `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School`. + +```js +assert(document.querySelectorAll('.lists li p')?.[3]?.innerText === 'We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.'); +``` + +Your fifth `h4` should have the text `V5 - 2017`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[4]?.innerText === 'V5 - 2017'); +``` + +Your fifth `p` should have the text `We added the back end and data visualization challenges.` + +```js +assert(document.querySelectorAll('.lists li p')?.[4]?.innerText === 'We added the back end and data visualization challenges.'); +``` + +Your sixth `h4` should have the text `V6 - 2018`. + +```js +assert(document.querySelectorAll('.lists li h4')?.[5]?.innerText === 'V6 - 2018'); +``` + +Your sixth `p` should have the text `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.` + +```js +assert(document.querySelectorAll('.lists li p')?.[5]?.innerText === 'We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.'); +``` + +Your six `h4` elements should each have the class `list-subtitle`. + +```js +const h4s = [...document.querySelectorAll('.lists li h4')]; +assert(h4s?.every(h4 => h4?.classList?.contains('list-subtitle'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+--fcc-editable-region-- +
+

A Brief History

+

Of the Curriculum

+
    + +
+
+--fcc-editable-region-- + +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md new file mode 100644 index 00000000000..06fb3da6c3c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md @@ -0,0 +1,195 @@ +--- +id: 6143bb50e8e48c6f5ef9d8d5 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Within your `aside` element, create two `img` elements, a `blockquote` element, and a third `img` element. Give the `blockquote` element a `class` set to `image-quote`. + +# --hints-- + +You should create three `img` elements within your `aside` element. + +```js +assert(document.querySelectorAll('aside img')?.length === 3); +``` + +You should create a `blockquote` element within your `aside` element. + +```js +assert.exists(document.querySelector('aside blockquote')); +``` + +Your `blockquote` element should have a `class` set to `image-quote`. + +```js +assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote')); +``` + +Your new elements should be in the correct order. + +```js +const children = document.querySelector('aside')?.children; +assert(children?.[0]?.localName === 'img'); +assert(children?.[1]?.localName === 'img'); +assert(children?.[2]?.localName === 'blockquote'); +assert(children?.[3]?.localName === 'img'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md new file mode 100644 index 00000000000..2a6bd8dc4cb --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md @@ -0,0 +1,206 @@ +--- +id: 6143c2a363865c715f1a3f72 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Within the `.image-wrapper` element, give your first `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`, an `alt` of `image of the quote machine project`, a `class` of `image-1`, a `loading` attribute set to `lazy`, a `width` attribute of `600`, and a `height` attribute of `400`. + +# --hints-- + +Your first `img` element should have a `src` attribute set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png'); +``` + +Your first `img` element should have an `alt` attribute set to `image of the quote machine project`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project'); +``` + +Your first `img` element should have a `class` attribute set to `image-1`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1')); +``` + +Your first `img` element should have a `loading` attribute set to `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy'); +``` + +Your first `img` element should have a `width` attribute set to `600`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600'); +``` + +Your first `img` element should have a `height` attribute set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md new file mode 100644 index 00000000000..66fe0f88a1d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md @@ -0,0 +1,213 @@ +--- +id: 6143cd08fe927072ca3a371d +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Within your `.image-wrapper` element, give the second `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`, an `alt` of `image of a calculator project`, a `loading` attribute set to `lazy`, a `class` set to `image-2`, a `width` attribute set to `400`, and a `height` attribute set to `400`. + +# --hints-- + +Your second `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png'); +``` + +Your second `img` element should have an `alt` set to `image of a calculator project`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project'); +``` + +Your second `img` element should have a `loading` attribute set to `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('loading') === 'lazy'); +``` + +Your second `img` element should have a `class` set to `image-2`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.classList?.contains('image-2')); +``` + +Your second `img` element should have a `width` set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('width') === '400'); +``` + +Your second `img` element should have a `height` set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md new file mode 100644 index 00000000000..e68a89181f4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md @@ -0,0 +1,220 @@ +--- +id: 6143cdf48b634a747de42104 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Within your `.image-wrapper` element, give your third `img` element a `src` of `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`, an `alt` of `four people working on code`, a `loading` attribute of `lazy`, a `class` set to `image-3`, a `width` attribute set to `600`, and a `height` attribute set to `400`. + +# --hints-- + +Your third `img` element should have a `src` set to `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg'); +``` + +Your third `img` element should have an `alt` set to `four people working on code`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code'); +``` + +Your third `img` element should have a `loading` attribute set to `lazy`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy'); +``` + +Your third `img` element should have a `class` set to `image-3`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3')); +``` + +Your third `img` element should have a `width` attribute set to `600`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600'); +``` + +Your third `img` element should have a `height` attribute set to `400`. + +```js +assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md new file mode 100644 index 00000000000..4014ac8d11d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md @@ -0,0 +1,226 @@ +--- +id: 6143d003ad9e9d76766293ec +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Within your `.image-quote` element, nest an `hr` element, a `p` element and a second `hr` element. Give the `p` element a `class` set to `quote` and the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. + +# --hints-- + +You should add two `hr` elements to your `.image-quote` element. + +```js +assert(document.querySelectorAll('.image-quote hr')?.length === 2); +``` + +You should add a `p` element to your `.image-quote` element. + +```js +assert(document.querySelectorAll('.image-quote p')?.length === 1); +``` + +Your `.image-quote` children should be in the correct order. + +```js +const children = document.querySelector('.image-quote')?.children; +assert(children?.[0]?.localName === 'hr'); +assert(children?.[1]?.localName === 'p'); +assert(children?.[2]?.localName === 'hr'); +``` + +Your new `p` element should have a `class` set to `quote`. + +```js +assert(document.querySelector('.image-quote p')?.classList.contains('quote')); +``` + +Your new `p` element should have the text `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`. + +```js +assert(document.querySelector('.image-quote p')?.innerText === 'The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md new file mode 100644 index 00000000000..813ab28b826 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md @@ -0,0 +1,217 @@ +--- +id: 6143d2842b497779bad947de +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To start your CSS, normalize the CSS rules by targeting all elements with `*`, including the `::before` and `::after` pseudo-selectors. Set the `padding` property and `margin` property both to `0`. + +# --hints-- + +You should have a `*, ::before, ::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); +``` + +Your `*, ::before, ::after` selector should have a `padding` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px'); +``` + +Your `*, ::before, ::after` selector should have a `margin` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md new file mode 100644 index 00000000000..4a5916f083b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md @@ -0,0 +1,226 @@ +--- +id: 6144d66a5358db0c80628757 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Create an `html` selector and give it a `font-size` property set to `62.5%`. This will set the default font size for your web page to 10px (the browser default is 16px). + +This will make it easier for you to work with `rem` units later, as `2rem` would be 20px. + +Also, set the `box-sizing` property to `border-box`. + +# --hints-- + +You should create an `html` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Your `html` selector should have a `font-size` property set to `62.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%'); +``` + +Your `html` selector should have a `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md new file mode 100644 index 00000000000..7ff9082f0e8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md @@ -0,0 +1,234 @@ +--- +id: 6144d7dbdd3e580da730ff45 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a `body` selector. Set the `font-family` property to `Baskervville`, with a fallback of `serif`. Set the `color` property to `linen` and the `background-color` property to `rgb(20, 30, 40)`. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `font-family` property set to `Baskervville`, with a fallback of `serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily; +assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`); +``` + +Your `body` selector should have a `color` property set to `linen`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen'); +``` + +Your `body` selector should have a `background-color` property set to `rgb(20, 30, 40)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md new file mode 100644 index 00000000000..8a5a35a79d4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md @@ -0,0 +1,228 @@ +--- +id: 6144de308591ec10e27d5383 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Create an `h1` selector, and set the `font-family` property to `Anton` with the fallback of `sans-serif`. + +# --hints-- + +You should have an `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily; +assert(fontFamily === 'Anton, sans-serif' || fontFamily === `"Anton", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md new file mode 100644 index 00000000000..b88b5b2c249 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md @@ -0,0 +1,232 @@ +--- +id: 6144e1ba93e435127a7f516d +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Create an `h2, h3, h4, h5, h6` selector. Give it a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +# --hints-- + +You should have an `h2, h3, h4, h5, h6` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')); +``` + +Your `h2, h3, h4, h5, h6` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md new file mode 100644 index 00000000000..cefa6e21aad --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md @@ -0,0 +1,241 @@ +--- +id: 6144ee46a9d6e614c598cc05 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Create an `a` selector, and give it a `text-decoration` property set to `none` and a `color` property set to `linen`. + +# --hints-- + +You should have an `a` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')); +``` + +Your `a` selector should have a `text-decoration` property set to `none`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none'); +``` + +Your `a` selector should have a `color` property set to `linen`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md new file mode 100644 index 00000000000..defe5fc1693 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md @@ -0,0 +1,242 @@ +--- +id: 6144ee790af79815ad15a832 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Now you are ready to start putting together the grid layout. CSS Grid offers a two-dimensional grid-based layout, allowing you to center items horizontally and vertically while still retaining control to do things like overlap elements. + +Begin by creating a `main` selector and giving it a `display` property set to `grid`. + +# --hints-- + +You should have a `main` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')); +``` + +Your `main` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md new file mode 100644 index 00000000000..fc25931639b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md @@ -0,0 +1,238 @@ +--- +id: 6144f1410990ea17187a722b +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Now you can style the layout of your grid. CSS Grid is similar to Flexbox in that it has a special property for both the parent and child elements. + +In this case, your parent element is the `main` element. Set the content to have a three-column layout by adding a `grid-template-columns` property with a value of `1fr 94rem 1fr`. This will create three columns where the middle column is `94rem` wide, and the first and last columns are both 1 fraction of the remaining space in the grid container. + +# --hints-- + +Your `main` section should have a `grid-template-columns` property set to `1fr 94rem 1fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === '1fr 94rem 1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- +main { + display: grid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md new file mode 100644 index 00000000000..3f24bba4d26 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md @@ -0,0 +1,239 @@ +--- +id: 6144f3818bfbc51844152e36 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Use the `minmax` function to make your columns responsive on any device. The `minmax` function takes two arguments, the first being the minimum value and the second being the maximum. These values could be a length, percentage, `fr`, or even a keyword like `max-content`. + +Wrap each of your already defined values of the `grid-template-columns` property in a `minmax` function, using each value as the second argument. The first argument should be `2rem`, `min-content`, and `2rem` respectively. + +# --hints-- + +Your `main` selector should have a `grid-template-columns` property set to `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === 'minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- +main { + display: grid; + grid-template-columns: 1fr 94rem 1fr; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md new file mode 100644 index 00000000000..15528e7d5d9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md @@ -0,0 +1,237 @@ +--- +id: 6144f42204c8c8195f1f3345 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +To add space between rows in the grid layout, you can use the `row-gap` property. Give the `main` selector a `row-gap` property of `3rem`. + +# --hints-- + +Your `main` selector should have a `row-gap` property of `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('main')?.rowGap === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +--fcc-editable-region-- +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md new file mode 100644 index 00000000000..0d3c9702bfe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md @@ -0,0 +1,250 @@ +--- +id: 6144f47b7c631e1a6f304dd5 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Your magazine will have three primary sections. You already set the overall layout in the `main` rule, but you can adjust the placement in the child rules. + +One option is the `grid-column` property, which is shorthand for `grid-column-start` and `grid-column-end`. The `grid-column` property tells the grid item which grid line to start and end at. + +Create a `.heading` rule and set the `grid-column` property to `2 / 3`. This will tell the `.heading` element to start at grid line 2 and end at grid line 3. + +# --hints-- + +You should have a `.heading` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')); +``` + +Your `.heading` selector should have a `grid-column` property set to `2 / 3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridColumn === '2 / 3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md new file mode 100644 index 00000000000..2d133371f79 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md @@ -0,0 +1,250 @@ +--- +id: 6148b07081759c2c691166a9 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Create a `.text` selector and give it a `grid-column` property set to `2 / 3`. + +# --hints-- + +You should have a `.text` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')); +``` + +Your `.text` selector should have a `grid-column` property set to `2 / 3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md new file mode 100644 index 00000000000..12fc38f790e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md @@ -0,0 +1,248 @@ +--- +id: 6148b0d764e4192e5712ed92 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +For additional control over the layout of your content, you can have a CSS Grid within a CSS Grid. + +Set the `display` property of your `.heading` selector to `grid`. + +# --hints-- + +Your `.heading` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, ::before, ::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- +.heading { + grid-column: 2 / 3; +} +--fcc-editable-region-- + +.text { + grid-column: 2 / 3; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md new file mode 100644 index 00000000000..e68572fccf6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md @@ -0,0 +1,253 @@ +--- +id: 6148b185ef37522f688316b0 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Now you can style the content of the `.heading` element with CSS Grid. + +The CSS `repeat()` function is used to repeat a value, rather than writing it out manually, and is helpful for grid layouts. For example, setting the `grid-template-columns` property to `repeat(20, 200px)` would create 20 columns each `200px` wide. + +Give your `.heading` element a `grid-template-columns` property set to `repeat(2, 1fr)` to create two columns of equal width. + +# --hints-- + +Your `.heading` selector should have a `grid-template-columns` property set to `repeat(2, 1fr)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridTemplateColumns === 'repeat(2, 1fr)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- +.heading { + grid-column: 2 / 3; + display: grid; +} +--fcc-editable-region-- + +.text { + grid-column: 2 / 3; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md new file mode 100644 index 00000000000..71ae54a2abe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md @@ -0,0 +1,250 @@ +--- +id: 6148b30464daf630848c21d4 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Give your `.heading` selector a `row-gap` property set to `1.5rem`. + +# --hints-- + +Your `.heading` selector should have a `row-gap` property set to `1.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); +} +--fcc-editable-region-- + +.text { + grid-column: 2 / 3; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md new file mode 100644 index 00000000000..cb2bf5e6088 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md @@ -0,0 +1,261 @@ +--- +id: 6148b4b150434734143db6f2 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Remember that the `grid-column` property determines which columns an element starts and ends at. There may be times where you are unsure of how many columns your grid will have, but you want an element to stop at the last column. To do this, you can use `-1` for the end column. + +Create a `.hero` selector and give it a `grid-column` property set to `1 / -1`. This will tell the element to span the full width of the grid. + +# --hints-- + +You should have a `.hero` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero')); +``` + +Your `.hero` selector should have a `grid-column` property set to `1 / -1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero')?.gridColumn === '1 / -1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md new file mode 100644 index 00000000000..50bcd857e95 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md @@ -0,0 +1,255 @@ +--- +id: 6148b5623efa8f369f2c3643 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Give the `.hero` selector a `position` property set to `relative`. + +# --hints-- + +Your `.hero` selector should have a `position` property set to `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +--fcc-editable-region-- +.hero { + grid-column: 1 / -1; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md new file mode 100644 index 00000000000..4e02bcea6b6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md @@ -0,0 +1,271 @@ +--- +id: 6148b59ef318e03875f35c4a +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Create an `img` selector and give it a `width` property set to `100%`, and an `object-fit` property set to `cover`. + +The `object-fit` property tells the browser how to position the element within its container. In this case, `cover` will set the image to fill the container, cropping as needed to avoid changing the aspect ratio. + +# --hints-- + +You should have an `img` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('img')); +``` + +Your `img` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('img')?.width === '100%'); +``` + +Your `img` selector should have an `object-fit` property set to `cover`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('img')?.objectFit === 'cover'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md new file mode 100644 index 00000000000..79cfd07a73b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md @@ -0,0 +1,280 @@ +--- +id: 6148bd62bbb8c83a5f1fc1b3 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Create a `.hero-title` selector and give it a `text-align` property set to `center`, a `color` property set to `orangered` and a `font-size` property set to `8rem`. + +# --hints-- + +You should have a `.hero-title` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')); +``` + +Your `.hero-title` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center'); +``` + +Your `.hero-title` selector should have a `color` property set to `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered'); +``` + +Your `.hero-title` selector should have a `font-size` property set to `8rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md new file mode 100644 index 00000000000..988ec7d9b4d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md @@ -0,0 +1,286 @@ +--- +id: 6148be3d605d6b3ca9425d11 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +The subtitle also needs to be styled. Create a `.hero-subtitle` selector and give it a `font-size` property set to `2.4rem`, a `color` property set to `orangered`, and a `text-align` property set to `center`. + +# --hints-- + +You should have a `.hero-subtitle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')); +``` + +Your `.hero-subtitle` selector should have a `font-size` property set to `2.4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem'); +``` + +Your `.hero-subtitle` selector should have a `color` property set to `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered'); +``` + +Your `.hero-subtitle` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md new file mode 100644 index 00000000000..900768bc017 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md @@ -0,0 +1,287 @@ +--- +id: 6148be82ca63c63daa8cca49 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Create an `.author` selector and give it a `font-size` property set to `2rem` and a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +# --hints-- + +You should have an `.author` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author')); +``` + +Your `.author` selector should have a `font-size` property set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem'); +``` + +Your `.author` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('.author')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md new file mode 100644 index 00000000000..86afef0ad3a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md @@ -0,0 +1,287 @@ +--- +id: 6148bf49fcc7913f05dbf9b7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Create a `.author-name a:hover` selector and give it a `background-color` property set to `#306203`. + +This will create a hover effect only for the `a` element within the `.author-name`, showing the original freeCodeCamp green in the background. + +# --hints-- + +You should have an `.author-name a:hover` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')); +``` + +Your `.author-name a:hover` selector should have a `background-color` property set to `#306203`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')?.backgroundColor === 'rgb(48, 98, 3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md new file mode 100644 index 00000000000..35fc54744f8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md @@ -0,0 +1,289 @@ +--- +id: 6148bfc43df3bc40fe0e6405 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Create a `.publish-date` selector and give it a `color` property of `rgba(255, 255, 255, 0.5)`. + +# --hints-- + +You should have a `.publish-date` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.publish-date')); +``` + +Your `.publish-date` selector should have a `color` property set to `rgba(255, 255, 255, 0.5)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.publish-date')?.color === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md new file mode 100644 index 00000000000..aa09f1df174 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md @@ -0,0 +1,299 @@ +--- +id: 6148c004ffc8434252940dc3 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Create a `.social-icons` selector. Give it a `display` property set to `grid`, and a `font-size` property set to `3rem`. + +# --hints-- + +You should have a `.social-icons` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')); +``` + +Your `.social-icons` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid'); +``` + +Your `.social-icons` selector should have a `font-size` property set to `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md new file mode 100644 index 00000000000..8a679a698b4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md @@ -0,0 +1,290 @@ +--- +id: 6148c224ecb157439bc5247c +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +The default settings for CSS Grid will create additional rows as needed, unlike Flexbox. Give the `.social-icons` selector a `grid-template-columns` property set to `repeat(5, 1fr)` to arrange the icons in a single row. + +# --hints-- + +Your `.social-icons` selector should have a `grid-template-columns` property set to `repeat(5, 1fr)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridTemplateColumns === 'repeat(5, 1fr)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md new file mode 100644 index 00000000000..65148730985 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md @@ -0,0 +1,295 @@ +--- +id: 6148c434bd731d45617a76c6 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +If you wanted to add more social icons, but keep them on the same row, you would need to update `grid-template-columns` to create additional columns. As an alternative, you can use the `grid-auto-flow` property. + +This property takes either `row` or `column` as the first value, with an optional second value of `dense`. `grid-auto-flow` uses an auto-placement algorithm to adjust the grid layout. Setting it to `column` will tell the algorithm to create new columns for content as needed. The `dense` value allows the algorithm to backtrack and fill holes in the grid with smaller items, which can result in items appearing out of order. + +For your `.social-icons` selector, set the `grid-auto-flow` property to `column`. + +# --hints-- + +Your `.social-icons` selector should have a `grid-auto-flow` property set to `column`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoFlow === 'column'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md new file mode 100644 index 00000000000..3f62a3cdb38 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md @@ -0,0 +1,294 @@ +--- +id: 6148c5036ddad94692a66230 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Now the auto-placement algorithm will kick in when you add a new icon element. However, the algorithm defaults the new column width to be `auto`, which will not match your current columns. + +You can override this with the `grid-auto-columns` property. Give the `.social-icons` selector a `grid-auto-columns` property set to `1fr`. + +# --hints-- + +Your `.social-icons` selector should have a `grid-auto-columns` property set to `1fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoColumns === '1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md new file mode 100644 index 00000000000..fb1d86107ae --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md @@ -0,0 +1,295 @@ +--- +id: 6148c58bace368497fb11bcf +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Much like Flexbox, with CSS Grid you can align the content of grid items with `align-items` and `justify-items`. `align-items` will align child elements along the column axis, and `justify-items` will align child elements along the row axis. + +Give the `.social-icons` selector an `align-items` property set to `center`. + +# --hints-- + +Your `.social-icons` selector should have an `align-items` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.alignItems === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md new file mode 100644 index 00000000000..187216737dc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md @@ -0,0 +1,300 @@ +--- +id: 6148c6aa9981d74af202125e +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give the `.text` selector a `font-size` property set to `1.8rem` and a `letter-spacing` property set to `0.6px`. + +# --hints-- + +Your `.text` selector should have a `font-size` property set to `1.8rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem'); +``` + +Your `.text` selector should have a `letter-spacing` property set to `0.6px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +--fcc-editable-region-- +.text { + grid-column: 2 / 3; +} +--fcc-editable-region-- + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md new file mode 100644 index 00000000000..6e5b23b6f5a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md @@ -0,0 +1,298 @@ +--- +id: 6148c721e74ecd4c619ae51c +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Your `.text` element is not a CSS Grid, but you can create columns within an element without using Grid by using the `column-width` property. + +Give your `.text` selector a `column-width` property set to `25rem`. + +# --hints-- + +Your `.text` selector should have a `column-width` property set to `25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.columnWidth === '25rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +--fcc-editable-region-- +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; +} +--fcc-editable-region-- + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md new file mode 100644 index 00000000000..69b4158009f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md @@ -0,0 +1,299 @@ +--- +id: 6148ceaf5d897d4d8b3554b3 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Magazines often use justified text in their printed content to structure their layout and control the flow of their content. While this works in printed form, justified text on websites can be an accessibility concern, for example presenting challenges for folks with dyslexia. + +To make your project look like a printed magazine, give the `.text` selector a `text-align` property set to `justify`. + +# --hints-- + +Your `.text` selector should have a `text-align` property set to `justify`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text')?.textAlign === 'justify'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +--fcc-editable-region-- +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; +} +--fcc-editable-region-- + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md new file mode 100644 index 00000000000..43e50830b1d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md @@ -0,0 +1,314 @@ +--- +id: 6148cf094b3f2b4e8a032c63 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +The `::first-letter` pseudo-selector allows you to target the first letter in the text content of an element. + +Create a `.first-paragraph::first-letter` selector and set the `font-size` property to `6rem`. Also give it a `color` property set to `orangered` to make it stand out. + +# --hints-- + +You should have a `.first-paragraph::first-letter` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')); +``` + +Your `.first-paragraph::first-letter` selector should have a `font-size` property set to `6rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.fontSize === '6rem'); +``` + +Your `.first-paragraph::first-letter` selector should have a `color` property set to `orangered`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.color === 'orangered'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md new file mode 100644 index 00000000000..06f0be77acf --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md @@ -0,0 +1,309 @@ +--- +id: 6148d0b863d10d50544ace0e +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +The other text has been shifted out of place. Move it into position by giving the `.first-paragraph::first-letter` selector a `float` property set to `left` and a `margin-right` property set to `1rem`. + +# --hints-- + +Your `.first-paragraph::first-letter` selector should have a `float` property set to `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.float === 'left'); +``` + +Your `.first-paragraph::first-letter` selector should have a `margin-right` property set to `1rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.marginRight === '1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +--fcc-editable-region-- +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md new file mode 100644 index 00000000000..dcbfd1394f6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md @@ -0,0 +1,313 @@ +--- +id: 6148d1bdf39c5b5186f5974b +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Create an `hr` selector, and give it a `margin` property set to `1.5rem 0`. + +# --hints-- + +You should have an `hr` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('hr')); +``` + +Your `hr` selector should have a `margin` property set to `1.5rem 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('hr')?.margin === '1.5rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md new file mode 100644 index 00000000000..8b519c2d9ef --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md @@ -0,0 +1,311 @@ +--- +id: 6148d1f9eb63c252e1f8acc4 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +To give the `hr` a color, you need to adjust the `border` property. Give the `hr` selector a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. + +# --hints-- + +Your `hr` should have a `border` property set to `1px solid rgba(120, 120, 120, 0.6)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid'); +assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +--fcc-editable-region-- +hr { + margin: 1.5rem 0; +} +--fcc-editable-region-- + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md new file mode 100644 index 00000000000..d9b089bb510 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md @@ -0,0 +1,330 @@ +--- +id: 6148d2444d01ab541e64a1e4 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Create a `.quote` selector. Give it a `color` property set to `#00beef`, a `font-size` property set to `2.4rem`, and a `text-align` property set to `center`. + +# --hints-- + +You should have a `.quote` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')); +``` + +Your `.quote` selector should have a `color` property set to `#00beef`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')?.color === 'rgb(0, 190, 239)'); +``` + +Your `.quote` selector should have a `font-size` property set to `2.4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')?.fontSize === '2.4rem'); +``` + +Your `.quote` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md new file mode 100644 index 00000000000..f9fc3477ffe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md @@ -0,0 +1,317 @@ +--- +id: 6148d33e31fccf558696c745 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +To make the quote text stand out more, give the `.quote` selector a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +# --hints-- + +Your `.quote` selector should have a `font-family` property set to `Raleway` with a fallback of `sans-serif`. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('.quote')?.fontFamily; +assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +--fcc-editable-region-- +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md new file mode 100644 index 00000000000..0710da4427f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md @@ -0,0 +1,341 @@ +--- +id: 6148d3fff5186b57123d97e2 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +A quote is not really a quote without proper quotation marks. You can add these with CSS pseudo selectors. + +Create a `.quote::before` selector and set the `content` property to `"` with a space following it. + +Also, create a `.quote::after` selector and set the `content` property to `"` with a space preceding it. + +# --hints-- + +You should have a `.quote::before` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')); +``` + +Your `.quote::before` selector should have a `content` property set to `'" '`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/)); +``` + +You should have a `.quote::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')); +``` + +Your `.quote::after` selector should have a `content` property set to `' "'`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md new file mode 100644 index 00000000000..16e04f302e7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md @@ -0,0 +1,335 @@ +--- +id: 6148d4d57b965358c9fa38bf +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Now it's time to style your third `section`. Note that it has the `text` and `text-with-images` values for the `class` attribute, which means it is already inheriting the styles from your `.text` rule. + +Create a `.text-with-images` selector and set the `display` property to `grid`. + +# --hints-- + +You should have a `.text-with-images` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')); +``` + +Your `.text-with-images` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md new file mode 100644 index 00000000000..98d7784f11d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md @@ -0,0 +1,335 @@ +--- +id: 6148d7720f0db36775db868a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +You will need to have a column for text and a column for images. Give the `.text-with-images` selector a `grid-template-columns` property set to `1fr 2fr`. Also set the `column-gap` property to `3rem` to provide more spacing between the columns. + +# --hints-- + +Your `.text-with-images` selector should have a `grid-template-columns` property set to `1fr 2fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.gridTemplateColumns === '1fr 2fr'); +``` + +Your `.text-with-images` selector should have a `column-gap` property set to `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.columnGap === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +--fcc-editable-region-- +.text-with-images { + display: grid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md new file mode 100644 index 00000000000..2e1b2b5c3d0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md @@ -0,0 +1,331 @@ +--- +id: 6148d94fdf6a5d6899f8ff15 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`. + +# --hints-- + +Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +--fcc-editable-region-- +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md new file mode 100644 index 00000000000..f0e4249bfbe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md @@ -0,0 +1,340 @@ +--- +id: 6148d9825b50a3698aeee644 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Create a `.lists` selector and set the `list-style-type` property to `none`. This will get rid of the bullet points on the list items. + +# --hints-- + +You should have a `.lists` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')); +``` + +Your `.lists` selector should have a `list-style-type` property set to `none`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md new file mode 100644 index 00000000000..49a92044791 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md @@ -0,0 +1,336 @@ +--- +id: 6148e162e255676ae0da6a76 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Give the `.lists` selector a `margin-top` property set to `2rem`. + +# --hints-- + +Your `.lists` selector should have a `margin-top` property set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists')?.marginTop === '2rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +--fcc-editable-region-- +.lists { + list-style-type: none; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md new file mode 100644 index 00000000000..859891139d8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md @@ -0,0 +1,345 @@ +--- +id: 6148e19c3e26436be0155690 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Create a `.lists li` rule to target the list items within your `.lists` element. Give it a `margin-bottom` property set to `1.5rem`. + +# --hints-- + +You should have a `.lists li` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists li')); +``` + +Your `.lists li` selector should have a `margin-bottom` property set to `1.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md new file mode 100644 index 00000000000..e3a186c9466 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md @@ -0,0 +1,349 @@ +--- +id: 6148e246146b646cf4255f0c +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Create a `.list-title, .list-subtitle` selector and set the `color` property to `#00beef`. + +# --hints-- + +You should have a `.list-title, .list-subtitle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')) +``` + +Your `.list-title, .list-subtitle` selector should have a `color` property set to `#00beef`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md new file mode 100644 index 00000000000..63c0aeb4931 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md @@ -0,0 +1,355 @@ +--- +id: 6148e2dcdd60306dd77d41cc +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Time to style the last section of the magazine - the images. + +The images are wrapped with an `aside` element using the `image-wrapper` class, so create an `.image-wrapper` selector. Set the `display` property to `grid`. + +# --hints-- + +You should have an `.image-wrapper` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')); +``` + +Your `.image-wrapper` selector should have a `display` property set to `grid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md new file mode 100644 index 00000000000..36e0d2208a1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md @@ -0,0 +1,357 @@ +--- +id: 6148e4d6861a486f60681f36 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +The images should be within a two column, three row layout. + +Give the `.image-wrapper` selector a `grid-template-columns` property set to `2fr 1fr` and a `grid-template-rows` property set to `repeat(3, min-content)`. This will give our grid rows that adjust in height based on the content, but columns that remain a fixed width based on the container. + +# --hints-- + +Your `.image-wrapper` selector should have a `grid-template-columns` property set to `2fr 1fr`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateColumns === '2fr 1fr'); +``` + +Your `.image-wrapper` selector should have a `grid-template-rows` property set to `repeat(3, min-content)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateRows === 'repeat(3, min-content)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- +.image-wrapper { + display: grid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md new file mode 100644 index 00000000000..b9448b07782 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md @@ -0,0 +1,353 @@ +--- +id: 6148e5a204d99e70343a63e4 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +The `gap` property is a shorthand way to set the value of `column-gap` and `row-gap` at the same time. If given one value, it sets the `column-gap` and `row-gap` both to that value. If given two values, it sets the `row-gap` to the first value and the `column-gap` to the second. + +Give the `.image-wrapper` selector a `gap` property set to `2rem`. + +# --hints-- + +Your `.image-wrapper` element should have a `gap` property set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md new file mode 100644 index 00000000000..80824ba7b96 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md @@ -0,0 +1,354 @@ +--- +id: 6148e62a6f768f71c4f04828 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +The `place-items` property can be used to set the `align-items` and `justify-items` values at the same time. The `place-items` property takes one or two values. If one value is provided, it is used for both the `align-items` and `justify-items` properties. If two values are provided, the first value is used for the `align-items` property and the second value is used for the `justify-items` property. + +Give the `.image-wrapper` selector a `place-items` property set to `center`. + +# --hints-- + +Your `.image-wrapper` selector should have a `place-items` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.placeItems === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +--fcc-editable-region-- +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md new file mode 100644 index 00000000000..9d5bdb5f947 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md @@ -0,0 +1,361 @@ +--- +id: 6148e789329dc9736ce59b85 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Create an `.image-1, .image-3` rule and give it a `grid-column` property set to `1 / -1`. This will allow the first and third images to span the full width of the grid. + +# --hints-- + +You should have an `.image-1, .image-3` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')); +``` + +Your `.image-1, .image-3` selector should have a `grid-column` property set to `1 / -1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')?.gridColumn === '1 / -1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md new file mode 100644 index 00000000000..89008705e4a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md @@ -0,0 +1,375 @@ +--- +id: 6148f34ebedc2274bceeb99c +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now that the magazine layout is finished, you need to make it responsive. + +Start with a `@media` query for `only screen` with a `max-width` of `720px`. Inside, create an `.image-wrapper` selector and give it a `grid-template-columns` property of `1fr`. + +This will collapse the three images into one column on smaller screens. + +# --hints-- + +You should have a new `@media` rule for `only screen and (max-width: 720px)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === 'only screen and (max-width: 720px)'); +``` + +Your new `@media` rule should have an `.image-wrapper` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.selectorText === '.image-wrapper'); +``` + +Your new `.image-wrapper` selector should have a `grid-template-columns` property of `1fr`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md new file mode 100644 index 00000000000..bd1c8ce483c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md @@ -0,0 +1,379 @@ +--- +id: 6148f600cde42b7670c2611f +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Create another `@media` query for `only screen` with a `max-width` of `600px`. Within, create a `.text-with-images` rule and give it a `grid-template-columns` property of `1fr`. + +This will collapse your bottom text area into a single column on smaller screens. + +# --hints-- + +You should create a new `@media` query for `only screen and (max-width: 600px)`. This should be below your previous `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === 'only screen and (max-width: 600px)'); +``` + +Your new `@media` query should have a `.text-with-images` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.selectorText === '.text-with-images'); +``` + +Your new `.text-with-images` selector should have a `grid-template-columns` property with a value of `1fr`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md new file mode 100644 index 00000000000..056b0601cdf --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md @@ -0,0 +1,404 @@ +--- +id: 6148f693e0728f77c87f3020 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-title` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. + +# --hints-- + +You should have a new `@media` query for `only screen` with a `max-width` of `550px`. This should come after your previous two. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)'); +``` + +Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-title` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title'); +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-title'); +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons'); +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text'); +``` + +Your `.hero-title` selector should have a `font-size` set to `6rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem'); +``` + +Your `.hero-subtitle, .author, .quote, .list-title` selector should have a `font-size` set to `1.8rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem'); +``` + +Your `.social-icons` selector should have a `font-size` set to `2rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem'); +``` + +Your `.text` selector should have a `font-size` set to `1.6rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 600px) { + .text-with-images { + grid-template-columns: 1fr; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md new file mode 100644 index 00000000000..bf702462281 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md @@ -0,0 +1,780 @@ +--- +id: 6148f6f7d8914c78e93136ca +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Create one final `@media` query for `only screen` with a `max-width` of `420px`. Within, create a `.hero-title` selector with a `font-size` property set to `4.5rem`. + +Congratulations! Your magazine is now complete. + +# --hints-- + +You should have a new `@media` query for `only screen and (max-width: 420px)`. This should be the last query in the `@media` query list. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)'); +``` + +Your new `@media` query should have a `.hero-title` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.selectorText === '.hero-title'); +``` + +Your `.hero-title` selector should have a `font-size` property set to `4.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.style?.fontSize === '4.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 600px) { + .text-with-images { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 550px) { + .hero-title { + font-size: 6rem; + } + + .hero-subtitle, + .author, + .quote, + .list-title { + font-size: 1.8rem; + } + + .social-icons { + font-size: 2rem; + } + + .text { + font-size: 1.6rem; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +img { + width: 100%; + object-fit: cover; +} + +hr { + margin: 1.5rem 0; + border: 1px solid rgba(120, 120, 120, 0.6); +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; + font-size: 1.8rem; + letter-spacing: 0.6px; + column-width: 25rem; + text-align: justify; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} + +.hero-title { + text-align: center; + color: orangered; + font-size: 8rem; +} + +.hero-subtitle { + font-size: 2.4rem; + color: orangered; + text-align: center; +} + +.author { + font-size: 2rem; + font-family: "Raleway", sans-serif; +} + +.author-name a:hover { + background-color: #306203; +} + +.publish-date { + color: rgba(255, 255, 255, 0.5); +} + +.social-icons { + display: grid; + font-size: 3rem; + grid-template-columns: repeat(5, 1fr); + grid-auto-flow: column; + grid-auto-columns: 1fr; + align-items: center; +} + +.first-paragraph::first-letter { + font-size: 6rem; + color: orangered; + float: left; + margin-right: 1rem; +} + +.quote { + color: #00beef; + font-size: 2.4rem; + text-align: center; + font-family: "Raleway", sans-serif; +} + +.quote::before { + content: '" '; +} + +.quote::after { + content: ' "'; +} + +.text-with-images { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 3rem; + margin-bottom: 3rem; +} + +.lists { + list-style-type: none; + margin-top: 2rem; +} + +.lists li { + margin-bottom: 1.5rem; +} + +.list-title, .list-subtitle { + color: #00beef; +} + +.image-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: repeat(3, min-content); + gap: 2rem; + place-items: center; +} + +.image-1, .image-3 { + grid-column: 1 / -1; +} + +@media only screen and (max-width: 720px) { + .image-wrapper { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 600px) { + .text-with-images { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 550px) { + .hero-title { + font-size: 6rem; + } + + .hero-subtitle, + .author, + .quote, + .list-title { + font-size: 1.8rem; + } + + .social-icons { + font-size: 2rem; + } + + .text { + font-size: 1.6rem; + } +} + +@media only screen and (max-width: 420px) { + .hero-title { + font-size: 4.5rem; + } +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md new file mode 100644 index 00000000000..9ab32041475 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md @@ -0,0 +1,256 @@ +--- +id: 614e0e503b110f76d3ac2ff6 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You should remove the temporary `width` attribute before writing the CSS for your `.hero-img`. + +# --hints-- + +Your `.hero-img` should not have a `width` attribute. + +```js +assert.isNull(document.querySelector('.hero-img')?.getAttribute('width')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+--fcc-editable-region-- + freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+--fcc-editable-region-- +
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying on + General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This was + the biggest curriculum improvement to date. +

    +
    • +
+
+ +
+
+ + +``` + +```css +*, +::before, +::after { + padding: 0; + margin: 0; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Baskervville', serif; + color: linen; + background-color: rgb(20, 30, 40); +} + +h1 { + font-family: 'Anton', sans-serif; +} + +h2, h3, h4, h5, h6 { + font-family: 'Raleway', sans-serif; +} + +a { + text-decoration: none; + color: linen; +} + +main { + display: grid; + grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); + row-gap: 3rem; +} + +.heading { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 1.5rem; +} + +.text { + grid-column: 2 / 3; +} + +.hero { + grid-column: 1 / -1; + position: relative; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md new file mode 100644 index 00000000000..f9fd23824b8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md @@ -0,0 +1,69 @@ +--- +id: 614e0e588f0e8a772a8a81a6 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400`. + +You will remove this later on when you have worked on the CSS. + +# --hints-- + +Your `img` element should have a `width` attribute set to `400`. + +```js +assert(document.querySelector('img')?.getAttribute('width') === '400'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md new file mode 100644 index 00000000000..8b701b945d0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md @@ -0,0 +1,104 @@ +--- +id: 6165d3b702a5d92ad970b30c +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +After your `img` element, add an `h1` element with the `class` set to `hero-title` and the text set to `OUR NEW CURRICULUM`, followed by a `p` element with the `class` set to `hero-subtitle` and the text set to `Our efforts to restructure our curriculum with a more project-based focus`. + +# --hints-- + +You should create an `h1` element. + +```js +assert.exists(document.querySelector('h1')); +``` + +Your `h1` element should come after your `img` element. + +```js +assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img'); +``` + +Your `h1` element should have the `class` set to `hero-title`. + +```js +assert(document.querySelector('h1')?.className === 'hero-title'); +``` + +Your `h1` element should have the text set to `OUR NEW CURRICULUM`. + +```js +assert(document.querySelector('h1')?.textContent === 'OUR NEW CURRICULUM'); +``` + +You should create a new `p` element. + +```js +assert.exists(document.querySelector('p')); +``` + +Your `p` element should come after your `h1` element. + +```js +assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); +``` + +Your `p` element should have the `class` set to `hero-subtitle`. + +```js +assert(document.querySelector('p')?.className === 'hero-subtitle'); +``` + +Your `p` element should have the text set to `Our efforts to restructure our curriculum with a more project-based focus`. + +```js +assert.equal(document.querySelector('p')?.textContent?.trim()?.replace(/\s{2,}/, ' '), 'Our efforts to restructure our curriculum with a more project-based focus'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +--fcc-editable-region-- +
+
+
+ freecodecamp logo +
+
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md new file mode 100644 index 00000000000..4b061e350ff --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md @@ -0,0 +1,77 @@ +--- +id: 6169cd8a558aa8434e0ad7f6 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +The `Referer` HTTP header contains information about the address or URL of a page that a user might be visiting from. This information can be used in analytics to track how many users from your page visit freecodecamp.org, for example. Setting the `rel` attribute to `noreferrer` omits this information from the HTTP request. Give your `a` element a `rel` attribute set to `noreferrer`. + +# --hints-- + +Your `a` element should have the `rel` set to `noreferrer`. + +```js +assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('rel') === 'noreferrer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+--fcc-editable-region-- +
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+
+
+--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md new file mode 100644 index 00000000000..4dca0168a6a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md @@ -0,0 +1,134 @@ +--- +id: 619665c9abd72906f3ad30f9 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +You will be building a happy Flappy Penguin, and further exploring CSS transforms and animations in the process. + +Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, `html` element with a language set to English, the appropriate `meta` tags, a `head`, `body`, and `title` element. Also, link your stylesheet to the page. + +# --hints-- + +Your code should have a `` declaration. + +```js +assert(code.match(//i)); +``` + +Your code should have an `html` element. + +```js +assert.equal(document.querySelectorAll('html')?.length, 1); +``` + +Your `html` element should have an opening tag with a `lang` attribute of `en`. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/gi)); +``` + +Your code should have a `head` element within the `html` element. + +```js +assert.equal(document.querySelectorAll('head')?.length, 1); +``` + +Your code should have a `body` element within the `html` element. + +```js +assert.equal(document.querySelectorAll('body')?.length, 1); +``` + +Your `head` element should come before your `body` element. + +```js +assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); +``` + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert.equal(meta?.length, 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +The other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +Your `title` should have some text. + +```js +const title = document.querySelector('title'); +assert.isAtLeast(title?.textContent?.length, 1); +``` + +Your code should have a `link` element. + +```js +assert.exists(document.querySelector('link')); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)); +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +const link_element = document.querySelector('link'); +const rel = link_element.getAttribute("rel"); +assert.equal(rel, "stylesheet"); +``` + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +const link = document.querySelector('link'); +assert.equal(link.dataset.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md new file mode 100644 index 00000000000..9812e1b4bdd --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md @@ -0,0 +1,56 @@ +--- +id: 61967e74a8e3690ab6292daa +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`. + +# --hints-- + +You should use the `body` element selector. + +```js +assert.match(code, /body\s*\{/); +``` + +You should use the `background` property in the `body` selector. + +```js +assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background')); +``` + +You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`. + +```js +assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md new file mode 100644 index 00000000000..e401d42eef2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md @@ -0,0 +1,53 @@ +--- +id: 61968df2acd5550bf1616c34 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Normalise your page's sizing, by removing the `body` element's `margin` and `padding`. + +# --hints-- + +You should give `body` a `margin` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +You should give `body` a `padding` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md new file mode 100644 index 00000000000..2c1d8594d5d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md @@ -0,0 +1,51 @@ +--- +id: 61968e9243a4090cc805531c +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Remove both the horizontal and vertical scrollbars, and prevent programmatic scrolling, using only one property. + +# --hints-- + +You should give `body` an `overflow` of `clip`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'clip'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md new file mode 100644 index 00000000000..051f3411d1b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md @@ -0,0 +1,64 @@ +--- +id: 61968f8877c6720d6d61aaf5 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Within the `body`, add a `div` with a `class` of `ground`. + +# --hints-- + +You should add a new `div`. + +```js +assert.exists(document.querySelector('div')); +``` + +You should give the `div` a `class` of `ground`. + +```js +assert.include(document.querySelector('div')?.className, 'ground'); +``` + +You should place the `div` within the `body`. + +```js +assert.exists(document.querySelector('body > div.ground')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md new file mode 100644 index 00000000000..e5896cabe05 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md @@ -0,0 +1,66 @@ +--- +id: 619691693bc14b0e528f5a20 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`. + +# --hints-- + +You should use the `.ground` selector. + +```js +assert.match(code, /\.ground\s*\{/); +``` + +You should give the `.ground` element a `width` of `100vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw'); +``` + +You should give the `.ground` element a `height` of `400px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md new file mode 100644 index 00000000000..05b5c3fd7e1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md @@ -0,0 +1,58 @@ +--- +id: 6196928658b6010f28c39484 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`. + +# --hints-- + +You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.ground { + width: 100vw; + height: 400px; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md new file mode 100644 index 00000000000..672d4bd665b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md @@ -0,0 +1,73 @@ +--- +id: 619692ff79f5770fc6d8c0b4 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin. + +# --hints-- + +You should add a new `div` within the `body`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 2); +``` + +You should give the `div` a `class` of `penguin`. + +```js +assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin'); +``` + +You should place `div.penguin` before `div.ground`. + +```js +assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + +--fcc-editable-region-- + + +
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md new file mode 100644 index 00000000000..8fd7eb06e2f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md @@ -0,0 +1,75 @@ +--- +id: 6196990f966e8f10a40094f6 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Target the `.penguin` element, and set its `width` and `height` to `300px`. + +# --hints-- + +You should use the `.penguin` selector. + +```js +assert.match(code, /\.penguin\s*\{/); +``` + +You should give `.penguin` a `width` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px'); +``` + +You should give `.penguin` a `height` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md new file mode 100644 index 00000000000..81ba962fab2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md @@ -0,0 +1,74 @@ +--- +id: 619699c10a0f6e11591d73c4 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`. + +# --hints-- + +You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto'); +``` + +You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.penguin { + width: 300px; + height: 300px; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md new file mode 100644 index 00000000000..49499e43bbc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md @@ -0,0 +1,83 @@ +--- +id: 61969aa6acef5b12200f672e +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +To create some scenery in the background, you will add two mountains. + +Above the `.penguin` element, add a `div` with a `class` of `left-mountain`. + +# --hints-- + +You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 3); +``` + +You should give the `div` a `class` of `left-mountain`. + +```js +assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain'); +``` + +You should place `.left-mountain` before `.penguin`. + +```js +assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + +--fcc-editable-region-- + + +
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md new file mode 100644 index 00000000000..d1dedc2cc7b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md @@ -0,0 +1,89 @@ +--- +id: 61969c487ced6f12db8fef94 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`. + +# --hints-- + +You should use the `.left-mountain` selector. + +```js +assert.match(code, /\.left-mountain\s*\{/); +``` + +You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px'); +``` + +You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px'); +``` + +You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`. + +```js +assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md new file mode 100644 index 00000000000..0ec1d402f55 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md @@ -0,0 +1,76 @@ +--- +id: 61969d66cfcdba137d021558 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout. + +# --hints-- + +You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md new file mode 100644 index 00000000000..87fa0124137 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md @@ -0,0 +1,91 @@ +--- +id: 61969e7451455614217e901b +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by. + +Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis. + +# --hints-- + +You should give `.left-mountain` a `transform` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform); +``` + +You should use the `skew` function on `transform`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew'); +``` + +You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md new file mode 100644 index 00000000000..95ffdc3f9af --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md @@ -0,0 +1,90 @@ +--- +id: 6196adc17f77a714d51485f2 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Set the stack level of the mountain element such that it remains directly behind the `.ground` element. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex); +``` + +You should set the `z-index` property to `2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); +``` + +You should not change the `z-index` of the `.ground` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md new file mode 100644 index 00000000000..8a12e627d5c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md @@ -0,0 +1,86 @@ +--- +id: 6196aead7ac7bf1584b17a7f +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`. + +# --hints-- + +You should give `.left-mountain` a `margin-top` of `100px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px'); +``` + +You should give `.ground` a `margin-top` of `-58px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md new file mode 100644 index 00000000000..432db5ff592 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md @@ -0,0 +1,92 @@ +--- +id: 6196ce0415498d2463989e84 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`. + +# --hints-- + +You should add a new `div` within `body`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 4); +``` + +You should give the `div` a `class` of `back-mountain`. + +```js +assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain'); +``` + +You should place `.back-mountain` after `.left-mountain`. + +```js +assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + +--fcc-editable-region-- + +
+ +
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md new file mode 100644 index 00000000000..44902852d0e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md @@ -0,0 +1,100 @@ +--- +id: 6196cee94c6da1253809dff9 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`. + +# --hints-- + +You should use the `.back-mountain` selector. + +```js +assert.match(code, /\.back-mountain\s*\{/); +``` + +You should give `.back-mountain` a `width` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px'); +``` + +You should give `.back-mountain` a `height` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px'); +``` + +You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`. + +```js +assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md new file mode 100644 index 00000000000..7bda36be539 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md @@ -0,0 +1,87 @@ +--- +id: 6196d00a5d7292262bc02f4c +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout. + +# --hints-- + +You should give `.back-mountain` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md new file mode 100644 index 00000000000..4d1e271a017 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md @@ -0,0 +1,100 @@ +--- +id: 6196d0cda039d026f7f78d1e +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex); +``` + +You should set the `z-index` property to `1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1'); +``` + +You should not change the `z-index` of the `.left-mountain` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md new file mode 100644 index 00000000000..09794d340aa --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -0,0 +1,119 @@ +--- +id: 6196d1ac33c68d27dcda5796 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`. + +# --hints-- + +You should use the `transform` property to rotate the element. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform); +``` + +You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)'); +``` + +You should give `.back-mountain` a `left` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left); +``` + +You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px'); +``` + +You should give `.back-mountain` a `top` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top); +``` + +You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +--fcc-editable-region-- +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md new file mode 100644 index 00000000000..1189f3ef131 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md @@ -0,0 +1,104 @@ +--- +id: 6196d213d99f16287bff22ae +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`. + +# --hints-- + +You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('body > div')?.length, 5); +``` + +You should give the new `div` element a `class` of `sun`. + +```js +assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun'); +``` + +You should place the new `div` element immediately after the `.back-mountain` element. + +```js +assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + +--fcc-editable-region-- + +
+
+ +
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md new file mode 100644 index 00000000000..eb97f4d10b0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md @@ -0,0 +1,112 @@ +--- +id: 6196d2c0f22ca0293107c048 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`. + +# --hints-- + +You should use the `.sun` selector. + +```js +assert.match(code, /\.sun\s*\{/); +``` + +You should give `.sun` a `width` of `200px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px'); +``` + +You should give `.sun` a `height` of `200px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px'); +``` + +You should give `.sun` a `background-color` of `yellow`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md new file mode 100644 index 00000000000..0c0d1ca0306 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md @@ -0,0 +1,105 @@ +--- +id: 6196d32d1340d829f0f6f57d +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle. + +# --hints-- + +You should give `.sun` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute'); +``` + +You should give `.sun` a `border-radius` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +--fcc-editable-region-- +.sun { + width: 200px; + height: 200px; + background-color: yellow; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md new file mode 100644 index 00000000000..60778c2811c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md @@ -0,0 +1,107 @@ +--- +id: 6196d41d40bf9b2aaea5d520 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen. + +# --hints-- + +You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px'); +``` + +You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +--fcc-editable-region-- +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md new file mode 100644 index 00000000000..ea00c654008 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md @@ -0,0 +1,118 @@ +--- +id: 6197cff995d03905b0cca8ad +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Your penguin will consist of two main sections: the head, and the body. + +Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`. + +# --hints-- + +You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin > div')?.length, 2); +``` + +You should give the first `div` a `class` of `penguin-head`. + +```js +assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head'); +``` + +You should give the second `div` a `class` of `penguin-body`. + +```js +assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md new file mode 100644 index 00000000000..a40396e2525 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md @@ -0,0 +1,125 @@ +--- +id: 6197f40a16afea068c7e60c8 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex); +``` + +You should give the `.penguin` element a `z-index` of `4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4'); +``` + +You should give `.penguin` a `position` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position); +``` + +You should give `.penguin` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +--fcc-editable-region-- +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md new file mode 100644 index 00000000000..1bf1ae8a6f0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md @@ -0,0 +1,65 @@ +--- +id: 6197f667297bb30a552ce017 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`. + +# --hints-- + +You should give `.ground` a `z-index` of `3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3'); +``` + +You should give `.ground` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md new file mode 100644 index 00000000000..de3c23b739e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md @@ -0,0 +1,128 @@ +--- +id: 61993b72e874e709b8dfd666 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`. + +# --hints-- + +You should use the `.penguin-head` selector. + +```js +assert.match(code, /\.penguin-head\s*\{/); +``` + +You should give `.penguin-head` a `width` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%'); +``` + +You should give `.penguin-head` a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%'); +``` + +You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`. + +```js +assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md new file mode 100644 index 00000000000..0e09016059a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md @@ -0,0 +1,122 @@ +--- +id: 61993cf26a8e0f0a553db223 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +_Most_ penguins do not have a square head. + +Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`. + +# --hints-- + +You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`. + +```js +// Maybe check for individual border-radius properties? +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +--fcc-editable-region-- +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md new file mode 100644 index 00000000000..3bdf0c05374 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md @@ -0,0 +1,139 @@ +--- +id: 61993dbb35adf30b10d49e38 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`. + +# --hints-- + +You should use the `.penguin-body` selector. + +```js +assert.match(code, /\.penguin-body\s*\{/); +``` + +You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%'); +``` + +You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%'); +``` + +You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`. + +```js +assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md new file mode 100644 index 00000000000..ace7e6a521f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md @@ -0,0 +1,133 @@ +--- +id: 61993e9adc9e9a0bb4d28fff +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Another interesting fact about penguins is that they do not have square bodies. + +Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body. + +# --hints-- + +You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; +} + +--fcc-editable-region-- +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md new file mode 100644 index 00000000000..8c2d7f69749 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md @@ -0,0 +1,139 @@ +--- +id: 6199409834ccaf0d10736596 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`. + +# --hints-- + +You should use the `.penguin *` selector. + +```js +assert.match(code, /\.penguin\s*\*\s*\{/); +``` + +You should give `.penguin *` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md new file mode 100644 index 00000000000..033f57b0fac --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md @@ -0,0 +1,154 @@ +--- +id: 6199429802b7c10dc79ff871 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent. + +# --hints-- + +You should give `.penguin-head` a `top` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top); +``` + +You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%'); +``` + +You should give `.penguin-head` a `left` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left); +``` + +You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md new file mode 100644 index 00000000000..2885245f1e4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md @@ -0,0 +1,156 @@ +--- +id: 619943285a41720e6370d985 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent. + +# --hints-- + +You should give `.penguin-body` a `top` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top); +``` + +You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%'); +``` + +You should give `.penguin-body` a `left` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left); +``` + +You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; +} + +--fcc-editable-region-- +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md new file mode 100644 index 00000000000..cc70348de32 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md @@ -0,0 +1,146 @@ +--- +id: 619943876b706d0f35c01dbc +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element. + +# --hints-- + +You should use the `z-index` property to change the stack level. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex); +``` + +You should give the `.penguin-head` element a `z-index` of `1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md new file mode 100644 index 00000000000..393425cd50b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md @@ -0,0 +1,148 @@ +--- +id: 6199442866286d0ff421a4fc +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string. + +# --hints-- + +You should use the `.penguin-body::before` selector. + +```js +assert.match(code, /\.penguin-body::before\s*\{/); +``` + +You should give `.penguin-body::before` a `content` of `""`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md new file mode 100644 index 00000000000..ecd856e1572 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md @@ -0,0 +1,158 @@ +--- +id: 619be73b3c806006ccc00bb0 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Give the pseudo-element a `width` half that of its parent, a `height` of `45%`, and a `background-color` of `gray`. + +# --hints-- + +You should give `.penguin-body::before` a `width` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%'); +``` + +You should give `.penguin-body::before` a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%'); +``` + +You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md new file mode 100644 index 00000000000..31c1bab65a3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md @@ -0,0 +1,155 @@ +--- +id: 619be7af7b0bf60770f5d2a4 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Position the pseudo-element `10%` from the top and `25%` from the left of its parent. + +# --hints-- + +You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%'); +``` + +You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md new file mode 100644 index 00000000000..018ff948bf5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md @@ -0,0 +1,160 @@ +--- +id: 619be80062551a080e32c821 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`. + +# --hints-- + +You should use the `border-radius` property to round off the crest. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius); +``` + +You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md new file mode 100644 index 00000000000..3f2e93ba9b4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md @@ -0,0 +1,152 @@ +--- +id: 619be8ce4ea49008c5bfbc30 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Increase the psuedo-element's transparency by `30%`. + +# --hints-- + +You should give `.penguin-body::before` an `opacity` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +--fcc-editable-region-- +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md new file mode 100644 index 00000000000..3650ed68e42 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md @@ -0,0 +1,166 @@ +--- +id: 619be946958c6009844f1dee +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`. + +# --hints-- + +You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2); +``` + +You should give the first `div` a `class` of `face`, but found `--fcc-actual--`. + +```js +assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face'); +``` + +You should give the second `div` a `class` of `face`, but found `--fcc-actual--`. + +```js +assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md new file mode 100644 index 00000000000..88156f2b9dc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md @@ -0,0 +1,193 @@ +--- +id: 619c155df0063a0a3fec0e32 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`. + +# --hints-- + +You should use the `.face` selector. + +```js +assert.match(code, /\.face\s*\{/); +``` + +You should give `.face` a `width` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width); +``` + +You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%'); +``` + +You should give `.face` a `height` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height); +``` + +You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%'); +``` + +You should give `.face` a `background-color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor); +``` + +You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md new file mode 100644 index 00000000000..52882871a63 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md @@ -0,0 +1,165 @@ +--- +id: 619c16debd0c270b01c5ce38 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`. + +# --hints-- + +You should give `.face` a `border-radius` of `70% 70% 60% 60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +--fcc-editable-region-- +.face { + width: 60%; + height: 70%; + background-color: white; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md new file mode 100644 index 00000000000..2059f320cda --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md @@ -0,0 +1,169 @@ +--- +id: 619cfdf2e63ddf05feab86ad +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Position the `.face` elements so that they are `15%` from the top. + +# --hints-- + +You should give `.face` a `top` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top); +``` + +You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +--fcc-editable-region-- +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md new file mode 100644 index 00000000000..a19064b3067 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md @@ -0,0 +1,171 @@ +--- +id: 619d019488f98c06acbbb71a +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Currently, the two `.face` elements are on top of each other. + +Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element. + +# --hints-- + +You should give a `class` of `left` to the first `.face` element. + +```js +assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left'); +``` + +You should give a `class` of `right` to the second `.face` element. + +```js +assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md new file mode 100644 index 00000000000..5a68b9e88d3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md @@ -0,0 +1,177 @@ +--- +id: 619d022dc8400c0763829a17 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Target the `.face` element with the `left` class, and position it `5%` left of its parent. + +# --hints-- + +You should use the `.face.left` selector. + +```js +assert.match(code, /\.face\.left\s*\{/); +``` + +You should give `.face.left` a `left` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left); +``` + +You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md new file mode 100644 index 00000000000..db36b467cd4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md @@ -0,0 +1,181 @@ +--- +id: 619d02c7bc95bf0827a5d296 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Target the `.face` element with the `right` class, and position it `5%` right of its parent. + +# --hints-- + +You should use the `.face.right` selector. + +```js +assert.match(code, /\.face\.right\s*\{/); +``` + +You should give `.face.right` a `right` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right); +``` + +You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +--fcc-editable-region-- +.face.left { + left: 5%; +} + + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md new file mode 100644 index 00000000000..dd8bb15bbee --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md @@ -0,0 +1,184 @@ +--- +id: 619d033915012509031f309a +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Below the `.face.right` element, add a `div` element with a `class` of `chin`. + +# --hints-- + +You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3); +``` + +You should give the `div` a `class` of `chin`. + +```js +assert.exists(document.querySelector('.penguin-head > div.chin')); +``` + +You should place the `div` element below the `.face.right` element. + +```js +assert.exists(document.querySelector('.face.right + .chin')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md new file mode 100644 index 00000000000..f375026932a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md @@ -0,0 +1,210 @@ +--- +id: 619d03dadadb6509a16f4f5f +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`. + +# --hints-- + +You should use the `.chin` selector. + +```js +assert.match(code, /\.chin\s*\{/); +``` + +You should give `.chin` a `width` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width); +``` + +You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%'); +``` + +You should give `.chin` a `height` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height); +``` + +You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%'); +``` + +You should give `.chin` a `background-color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor); +``` + +You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md new file mode 100644 index 00000000000..538ae5b900d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md @@ -0,0 +1,206 @@ +--- +id: 619d0503e03a790a4179d463 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`. + +# --hints-- + +You should give `.chin` a `top` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top); +``` + +You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%'); +``` + +You should give `.chin` a `left` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left); +``` + +You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%'); +``` + +You should give `.chin` a `border-radius` of `70% 70% 100% 100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +--fcc-editable-region-- +.chin { + width: 90%; + height: 70%; + background-color: white; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md new file mode 100644 index 00000000000..f24504c7d5d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md @@ -0,0 +1,197 @@ +--- +id: 619d05c54dabca0b10058235 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +So far, the `.face` and `.chin` elements have the same `background-color`. + +Create a custom CSS property called `--penguin-face`, and set it to `white`. + +# --hints-- + +You should use the `:root` selector. + +```js +assert.match(code, /:root\s*\{/); +``` + +You should give `:root` a `--penguin-face` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face')); +``` + +You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: white; + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md new file mode 100644 index 00000000000..6e3269089e5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md @@ -0,0 +1,197 @@ +--- +id: 619d0882f54bf40bdc4671ed +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Where relevant, replace property values with your `--penguin-face` variable. + +# --hints-- + +You should give `.face` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +You should give `.chin` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +You should not use `var(--penguin-face)` in the `.penguin-body` selector. + +```js +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: white; + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md new file mode 100644 index 00000000000..9c78f74e37e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md @@ -0,0 +1,222 @@ +--- +id: 619d090cd8d6db0c93dc5087 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5); +``` + +You should give the first new `div` a `class` of `eye`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye')); +``` + +You should give the second new `div` a `class` of `eye`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2); +``` + +You should give the first new `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye.left')); +``` + +You should give the second new `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye.right')); +``` + +You should place `div.eye.left` after `div.chin`. + +```js +assert.exists(document.querySelector('.chin + .eye.left')); +``` + +You should place `div.eye.right` after `div.eye.left`. + +```js +assert.exists(document.querySelector('.eye.left + .eye.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md new file mode 100644 index 00000000000..9a34e11ba50 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md @@ -0,0 +1,207 @@ +--- +id: 619d0b51ca42ed0d74582186 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`. + +# --hints-- + +You should use the `.eye` selector. + +```js +assert.match(code, /\.eye\s*\{/); +``` + +You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%'); +``` + +You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%'); +``` + +You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md new file mode 100644 index 00000000000..6f72a364916 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md @@ -0,0 +1,200 @@ +--- +id: 619d0bc9cb05360e1bf549c3 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%'); +``` + +You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +--fcc-editable-region-- +.eye { + width: 15%; + height: 17%; + background-color: black; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md new file mode 100644 index 00000000000..00fce3bac39 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md @@ -0,0 +1,215 @@ +--- +id: 619d0c1594c38c0ebae75878 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent. + +# --hints-- + +You should use the `.eye.left` selector. + +```js +assert.match(code, /\.eye\.left\s*\{/); +``` + +You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%'); +``` + +You should use the `.eye.right` selector. + +```js +assert.match(code, /\.eye\.right\s*\{/); +``` + +You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md new file mode 100644 index 00000000000..c4246b6bc5a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md @@ -0,0 +1,225 @@ +--- +id: 619d0d18ca99870f884a7bff +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Within each `.eye` element, add a `div` with a `class` of `eye-lid`. + +# --hints-- + +You should add one `div` element within `.eye.left`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1); +``` + +You should add one `div` element within `.eye.right`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1); +``` + +You should give the first new `div` a `class` of `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.left > div.eye-lid')); +``` + +You should give the second new `div` a `class` of `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.right > div.eye-lid')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+ +
+
+ +
+
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md new file mode 100644 index 00000000000..98f0c969be6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md @@ -0,0 +1,227 @@ +--- +id: 619d0daf214542102739b0da +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`. + +# --hints-- + +You should use the `.eye-lid` selector. + +```js +assert.match(code, /\.eye-lid\s*\{/); +``` + +You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%'); +``` + +You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%'); +``` + +You should give `.eye-lid` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md new file mode 100644 index 00000000000..55a4986c3f4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md @@ -0,0 +1,226 @@ +--- +id: 619d0e56f9ca9710fcb974e3 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`. + +# --hints-- + +You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%'); +``` + +You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%'); +``` + +You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +--fcc-editable-region-- +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md new file mode 100644 index 00000000000..ab18d6b7b27 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md @@ -0,0 +1,247 @@ +--- +id: 619d0eec0ac40611b41e2ccc +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7); +``` + +You should give the first new `div` a `class` of `blush`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush')); +``` + +You should give the second new `div` a `class` of `blush`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2); +``` + +You should give the first new `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush.left')); +``` + +You should give the second new `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush.right')); +``` + +You should place `.blush.right` after `.blush.left`. + +```js +assert.exists(document.querySelector('.blush.left + .blush.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md new file mode 100644 index 00000000000..e20794d7cc2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md @@ -0,0 +1,238 @@ +--- +id: 619d0fc9825c271253df28d4 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`. + +# --hints-- + +You should use the `.blush` selector. + +```js +assert.match(code, /\.blush\s*\{/); +``` + +You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%'); +``` + +You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%'); +``` + +You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md new file mode 100644 index 00000000000..fceedab5837 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md @@ -0,0 +1,231 @@ +--- +id: 619d102d786c3d13124c37c6 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%'); +``` + +You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +--fcc-editable-region-- +.blush { + width: 15%; + height: 10%; + background-color: pink; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md new file mode 100644 index 00000000000..3f87fe671ab --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md @@ -0,0 +1,246 @@ +--- +id: 619d107edf7ddf13cc77106a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent. + +# --hints-- + +You should use the `.blush.left` selector. + +```js +assert.match(code, /\.blush\.left\s*\{/); +``` + +You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%'); +``` + +You should use the `.blush.right` selector. + +```js +assert.match(code, /\.blush\.right\s*\{/); +``` + +You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md new file mode 100644 index 00000000000..1d3c79dd123 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md @@ -0,0 +1,271 @@ +--- +id: 619d10cc98145f14820399c5 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9); +``` + +You should give the first new `div` a `class` of `beak`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak')); +``` + +You should give the second new `div` a `class` of `beak`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2); +``` + +You should give the first new `div` a `class` of `top`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak.top')); +``` + +You should give the second new `div` a `class` of `bottom`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak.bottom')); +``` + +You should place `div.beak.top` after `div.blush.right`. + +```js +assert.exists(document.querySelector('.blush.right + .beak.top')); +``` + +You should place `div.beak.bottom` after `div.beak.top`. + +```js +assert.exists(document.querySelector('.beak.top + .beak.bottom')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md new file mode 100644 index 00000000000..f17baca2873 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md @@ -0,0 +1,256 @@ +--- +id: 619d115e2adcd71538e82ebb +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`. + +# --hints-- + +You should use the `.beak` selector. + +```js +assert.match(code, /\.beak\s*\{/); +``` + +You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%'); +``` + +You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange'); +``` + +You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md new file mode 100644 index 00000000000..2ad23a1eb32 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md @@ -0,0 +1,262 @@ +--- +id: 619d11e6d5ef9515d2a16033 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent. + +# --hints-- + +You should use the `.beak.top` selector. + +```js +assert.match(code, /\.beak\.top\s*\{/); +``` + +You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%'); +``` + +You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%'); +``` + +You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md new file mode 100644 index 00000000000..ebcf7969f95 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md @@ -0,0 +1,267 @@ +--- +id: 619d129a417d0716a94de913 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`. + +# --hints-- + +You should use the `.beak.bottom` selector. + +```js +assert.match(code, /\.beak\.bottom\s*\{/); +``` + +You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%'); +``` + +You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%'); +``` + +You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +--fcc-editable-region-- +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md new file mode 100644 index 00000000000..2cce37d722e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md @@ -0,0 +1,267 @@ +--- +id: 619d1340361095175f4b5115 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element. + +# --hints-- + +You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin > div')?.length, 3); +``` + +You should give the new `div` a `class` of `shirt`. + +```js +assert.exists(document.querySelector('.penguin > div.shirt')); +``` + +You should place the new `div` before `.penguin-body`. + +```js +assert.exists(document.querySelector('.shirt + .penguin-body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md new file mode 100644 index 00000000000..604b770fabd --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md @@ -0,0 +1,263 @@ +--- +id: 619d15797b580c1828b05426 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Within the `.shirt` element, add a `div` with the following emoji as content: 💜 + +# --hints-- + +You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.shirt > div')?.length, 1); +``` + +You should give the new `div` a content of `💜`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelector('.shirt > div')?.textContent, '💜'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md new file mode 100644 index 00000000000..2ba7d8fed23 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md @@ -0,0 +1,264 @@ +--- +id: 619d15d955d9d418c4487bbc +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS` + +# --hints-- + +You should add one `p` element within `.shirt`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.shirt > p')?.length, 1); +``` + +You should give the `p` element the content `I CSS`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
💜
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md new file mode 100644 index 00000000000..e5c9b1d8122 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md @@ -0,0 +1,278 @@ +--- +id: 619d1629a8adc61960ca8b40 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`. + +# --hints-- + +You should use the `.shirt` selector. + +```js +assert.match(code, /\.shirt\s*\{/); +``` + +You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px'); +``` + +You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif'); +``` + +You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md new file mode 100644 index 00000000000..d9113a4e226 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md @@ -0,0 +1,272 @@ +--- +id: 619d1c5fc9f8941a400955da +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +If you look closely, the _heart_ emoji is slightly different. This is because some of the character's properties were overridden by the `font-weight` style of `bold`. + +Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value. + +# --hints-- + +You should use the `.shirt div` selector to target the `div` with the heart emoji. + +```js +assert.match(code, /\.shirt div\s*\{/); +``` + +You should give the `.shirt div` a `font-weight` of `initial` or `normal`. + +```js +assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; +} + + +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md new file mode 100644 index 00000000000..3aca16ece5a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md @@ -0,0 +1,273 @@ +--- +id: 619d1dab9ff3421ae1976991 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent. + +# --hints-- + +You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px'); +``` + +You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; +} + +.shirt div { + font-weight: initial; + +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md new file mode 100644 index 00000000000..fedfdba5a3e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md @@ -0,0 +1,281 @@ +--- +id: 619d1deb8b04811b8839ffe4 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element. + +# --hints-- + +You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px'); +``` + +You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px'); +``` + +You should give the `.shirt` element a `z-index` of `1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; + +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md new file mode 100644 index 00000000000..845290eeb7a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md @@ -0,0 +1,272 @@ +--- +id: 619d1e7a8e81a61c5a819dc4 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +For the shirt's final touch, set the `color` to `#6a6969`. + +# --hints-- + +You should give `.shirt` a `color` of `#6a6969`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} +--fcc-editable-region-- + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md new file mode 100644 index 00000000000..adfd82c7324 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md @@ -0,0 +1,306 @@ +--- +id: 619d1ed33c9a071cf657a0d6 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Fun fact: Penguins cannot stand without at least two feet. + +Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2); +``` + +You should give the first new `div` a `class` of `foot`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot')); +``` + +You should give the second new `div` a `class` of `foot`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2); +``` + +You should give one `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot.left')); +``` + +You should give the other `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot.right')); +``` + +You should place `.foot.right` after `.foot.left`. + +```js +assert.exists(document.querySelector('.foot.left + .foot.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md new file mode 100644 index 00000000000..dcaecb2f7e9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md @@ -0,0 +1,295 @@ +--- +id: 619d1fb5d244c31db8a7fdb7 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`. + +# --hints-- + +You should use the `.foot` selector. + +```js +assert.match(code, /\.foot\s*\{/); +``` + +You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%'); +``` + +You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%'); +``` + +You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md new file mode 100644 index 00000000000..12dfd6b819c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md @@ -0,0 +1,288 @@ +--- +id: 619d204bd73ae51e743b8e94 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%'); +``` + +You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: orange; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md new file mode 100644 index 00000000000..e17e69cbf1e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md @@ -0,0 +1,304 @@ +--- +id: 619d20b12996101f430920fb +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +The penguin's beak and feet share the same `color`. + +Create a new custom CSS variable named `--penguin-picorna`, and replace all relavant property values with it. + +# --hints-- + +You should give `:root` a `--penguin-picorna` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna')); +``` + +You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange'); +``` + +You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); +``` + +You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; + +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: orange; + top: 85%; + border-radius: 50%; +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md new file mode 100644 index 00000000000..f8aacfd20a4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md @@ -0,0 +1,304 @@ +--- +id: 619d21fe6a3f9b2016be9d9d +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent. + +# --hints-- + +You should use the `.foot.left` selector. + +```js +assert.match(code, /\.foot\.left\s*\{/); +``` + +You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'); +``` + +You should use the `.foot.right` selector. + +```js +assert.match(code, /\.foot\.right\s*\{/); +``` + +You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; +} + + +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md new file mode 100644 index 00000000000..57cd259e1ed --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md @@ -0,0 +1,300 @@ +--- +id: 619d229b0e542520cd91c685 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`. + +# --hints-- + +You should give `.foot.left` a `transform` of `rotate(80deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)'); +``` + +You should give `.foot.right` a `transform` of `rotate(-80deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; +} + +--fcc-editable-region-- +.foot.left { + left: 25%; + +} + +.foot.right { + right: 25%; + +} +--fcc-editable-region-- + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md new file mode 100644 index 00000000000..eafce1fd17a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md @@ -0,0 +1,295 @@ +--- +id: 619d23089e787e216a7043d6 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element. + +# --hints-- + +You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + +} +--fcc-editable-region-- + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md new file mode 100644 index 00000000000..f00af96ee32 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md @@ -0,0 +1,328 @@ +--- +id: 619d237a107c10221ed743fa +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Fun fact: Penguins cannot fly without wings. + +Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4); +``` + +You should give the first new `div` a `class` of `arm`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm')); +``` + +You should give the second new `div` a `class` of `arm`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2); +``` + +You should give one `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm.left')); +``` + +You should give the other `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm.right')); +``` + +You should place `.arm.right` after `.arm.left`. + +```js +assert.exists(document.querySelector('.arm.left + .arm.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+--fcc-editable-region-- +
+ +
+
+
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md new file mode 100644 index 00000000000..35a067ba4d4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md @@ -0,0 +1,317 @@ +--- +id: 619d26b12e651022d80cd017 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`. + +# --hints-- + +You should use the `.arm` selector. + +```js +assert.match(code, /\.arm\s*\{/); +``` + +You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%'); +``` + +You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%'); +``` + +You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`. + +```js +assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md new file mode 100644 index 00000000000..6acbf4fb438 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md @@ -0,0 +1,332 @@ +--- +id: 619d2712853306238f41828e +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it. + +# --hints-- + +You should give `:root` a `--penguin-skin` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin')); +``` + +You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray'); +``` + +You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))'); +``` + +You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)'); +``` + +You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; + --penguin-picorna: orange; + +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + gray, + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + gray, + rgb(209, 210, 199) + ); +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md new file mode 100644 index 00000000000..195767a154e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md @@ -0,0 +1,340 @@ +--- +id: 619d2b7a84e78b246f2d17a2 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent. + +# --hints-- + +You should use the `.arm.left` selector. + +```js +assert.match(code, /\.arm\.left\s*\{/); +``` + +You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%'); +``` + +You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%'); +``` + +You should use the `.arm.right` selector. + +```js +assert.match(code, /\.arm\.right\s*\{/); +``` + +You should give `.arm.right` a `top` of `0%`. + +```js +assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top); +``` + +You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md new file mode 100644 index 00000000000..0c173bdabbc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md @@ -0,0 +1,325 @@ +--- +id: 619d2bd9c1d43c2526e96f1f +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent. + +# --hints-- + +You should use the `transform-origin` property to do this. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); +``` + +You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`. + +```js +assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + +} + +.arm.right { + top: 0%; + right: -5%; +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md new file mode 100644 index 00000000000..a8312184351 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md @@ -0,0 +1,320 @@ +--- +id: 619d2d4e80400325ff89664a +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis. + +# --hints-- + +You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + +} +--fcc-editable-region-- + +.arm.right { + top: 0%; + right: -5%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md new file mode 100644 index 00000000000..a505cbe7fad --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md @@ -0,0 +1,321 @@ +--- +id: 619d2ebc81ba81271460850d +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Rotate the right arm by `45deg` counterclockwise. + +# --hints-- + +You should give `.arm.right` a `transform` of `rotate(-45deg)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +--fcc-editable-region-- +.arm.right { + top: 0%; + right: -5%; + +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md new file mode 100644 index 00000000000..cb7d052a130 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md @@ -0,0 +1,327 @@ +--- +id: 619d2f0e9440bc27caee1cec +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Fun fact: Most, if not all, flippers are not naturally rectangles. + +Give the `.arm` elements top -left, -right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`. + +# --hints-- + +You should give `.arm` a `border-radius` of `30% 30% 30% 120%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + +} +--fcc-editable-region-- + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md new file mode 100644 index 00000000000..f2a41bcf9f1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md @@ -0,0 +1,323 @@ +--- +id: 619d2fd3ff4f772882e3d998 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element. + +# --hints-- + +You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + +} +--fcc-editable-region-- + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md new file mode 100644 index 00000000000..26646923045 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md @@ -0,0 +1,333 @@ +--- +id: 619d30350883802921bfcccc +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +Now, you are going to use CSS animations to make the penguin wave. + +Define a new `@keyframes` named `wave`. + +# --hints-- + +You should defined a new `@keyframes` rule. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes')); +``` + +You should give the `@keyframes` rule a `name` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md new file mode 100644 index 00000000000..196d8ca49de --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md @@ -0,0 +1,345 @@ +--- +id: 619d324f5915c929f36ae91d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Give `wave` four waypoints starting at `10%`, and incrementing by `10%`. + +# --hints-- + +You should add a `10%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%')); +``` + +You should add a `20%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%')); +``` + +You should add a `30%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%')); +``` + +You should add a `40%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md new file mode 100644 index 00000000000..882b72e8de8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md @@ -0,0 +1,338 @@ +--- +id: 619d32c7fa21f32aaa91d499 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm. + +# --hints-- + +You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + + } + 20% { + + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md new file mode 100644 index 00000000000..73a2ed37e49 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md @@ -0,0 +1,338 @@ +--- +id: 619d333b738e3c2b5d58b095 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm. + +# --hints-- + +You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md new file mode 100644 index 00000000000..a23611954b9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md @@ -0,0 +1,344 @@ +--- +id: 619d337765b9f02c10e93722 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +For the third and fourth waypoints, repeat the `transform` pattern once more. + +# --hints-- + +You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)'); +``` + +You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md new file mode 100644 index 00000000000..1e1d1b853b1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md @@ -0,0 +1,357 @@ +--- +id: 619d33c51140292cc5a21742 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function. + +# --hints-- + +You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave'); +``` + +You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s'); +``` + +You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite'); +``` + +You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + +} +--fcc-editable-region-- + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md new file mode 100644 index 00000000000..81d54d1bee5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md @@ -0,0 +1,347 @@ +--- +id: 619d3482f505452d861d0f62 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions. + +# --hints-- + +You should use the `.penguin:active` selector. + +```js +assert.match(code, /\.penguin:active\s*\{/); +``` + +You should give `.penguin:active` a `transform` of `scale(1.5)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md new file mode 100644 index 00000000000..723220f0d88 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md @@ -0,0 +1,346 @@ +--- +id: 619d3561a951bf2e41a24f10 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +When you activate the `.penguin` element, it might look as though you can drag it around. This is not true. + +Indicate this to users, by giving the active element a `cursor` property of `not-allowed`. + +# --hints-- + +You should give `.penguin:active` a `cursor` property of `not-allowed`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; +} + +.penguin * { + position: absolute; +} + +--fcc-editable-region-- +.penguin:active { + transform: scale(1.5); + +} +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md new file mode 100644 index 00000000000..d5401ee81ec --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md @@ -0,0 +1,357 @@ +--- +id: 619d36103839c82efa95dd34 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`. + +# --hints-- + +You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s'); +``` + +You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out'); +``` + +You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +--fcc-editable-region-- +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; + +} +--fcc-editable-region-- + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md new file mode 100644 index 00000000000..3c3dc0c6bf0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md @@ -0,0 +1,670 @@ +--- +id: 619d3711d04d623000013e9e +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element. + +Congratulations! You have completed the Responsive Web Design certification. + +# --hints-- + +You should give `.ground` a `height` of `calc(100vh - 300px)`. + +```js +assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; + transition: transform 1s ease-in-out 0ms; +} + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +--fcc-editable-region-- +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + position: absolute; + transform: skew(0deg, 44deg); + z-index: 2; + margin-top: 100px; +} + +.back-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255)); + position: absolute; + z-index: 1; + transform: rotate(45deg); + left: 110px; + top: 225px; +} + +.sun { + width: 200px; + height: 200px; + background-color: yellow; + position: absolute; + border-radius: 50%; + top: -75px; + right: -75px; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; + z-index: 4; + position: relative; + transition: transform 1s ease-in-out 0ms; +} + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.penguin-body { + width: 53%; + height: 45%; + background: linear-gradient( + 45deg, + rgb(134, 133, 133) 0%, + rgb(234, 231, 231) 25%, + white 67% + ); + border-radius: 80% 80% 100% 100%; + top: 40%; + left: 23.5%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: calc(100vh - 300px); + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; + margin-top: -58px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md new file mode 100644 index 00000000000..7d4ef4402ba --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md @@ -0,0 +1,55 @@ +--- +id: 61a8fe15a6a31306e60d1e89 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Normalise your page, by setting the `width` to `100%`, and `height` to `100vh`. + +# --hints-- + +You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); +``` + +You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md new file mode 100644 index 00000000000..a3ee85de432 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md @@ -0,0 +1,56 @@ +--- +id: 5d822fd413a79914d39e98cd +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later. + +# --hints-- + +You should use the `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +You should use the `border` property to style all the elements. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); +``` + +All elements should have a `1px solid black` border. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles?.border, '1px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md new file mode 100644 index 00000000000..b86013bb54c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md @@ -0,0 +1,61 @@ +--- +id: 5d822fd413a79914d39e98ce +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. + +# --hints-- + +You should use the `box-sizing` property. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); +``` + +You should make use of the existing `*` selector. + +```js +// Two selectors create two CSSStyleRule objects +assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); +``` + +All elements should have a `box-sizing` of `border-box`. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles.boxSizing, 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- +* { + border: 1px solid black; +} + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md new file mode 100644 index 00000000000..45b83843303 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md @@ -0,0 +1,69 @@ +--- +id: 5d822fd413a79914d39e98cf +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. + +# --hints-- + +You should use the `body` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` should have a `height` of `100vh`. + +```js +const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); +assert.equal(bodyStyles?.height, '100vh'); +``` + +Your `body` should have a `margin` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +Your `body` should have the `overflow` property set to `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md new file mode 100644 index 00000000000..bf59b99385e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md @@ -0,0 +1,65 @@ +--- +id: 5d822fd413a79914d39e98d0 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. + +# --hints-- + +You should create a `div` element. + +```js +assert.exists(document.querySelector('div')); +``` + +Your `div` element should be within the `body`. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should have a class of `background-buildings` + +```js +assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md new file mode 100644 index 00000000000..9e589da64da --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md @@ -0,0 +1,68 @@ +--- +id: 5d822fd413a79914d39e98d1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. + +# --hints-- + +You should use the `background-buildings` class to select the correct element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); +``` + +Your `.background-buildings` element should have a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); +``` + +Your `.background-buildings` element should have a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md new file mode 100644 index 00000000000..39aae73d0cc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md @@ -0,0 +1,83 @@ +--- +id: 5d822fd413a79914d39e98d2 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div').length, 2); +``` + +You should give the new `div` a class of `bb1`. + +```js +assert.exists(document.querySelector('div.bb1')); +``` + +You should use a `.bb1` class selector to style the element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); +``` + +You should give the `.bb1` element a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); +``` + +You should give the `.bb1` element a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md new file mode 100644 index 00000000000..bf5c4b30f1f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md @@ -0,0 +1,105 @@ +--- +id: 5d822fd413a79914d39e98d3 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. + +# --hints-- + +You should create four new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 6); +``` + +You should give one of the new `div` elements a class of `bb1a`. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should give one of the new `div` elements a class of `bb1b`. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should give one of the new `div` elements a class of `bb1c`. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should give one of the new `div` elements a class of `bb1d`. + +```js +assert.exists(document.querySelector('div.bb1d')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); +``` + +You should place the new `div` elements within the `.bb1` element. + +```js +assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md new file mode 100644 index 00000000000..fcf15ddd14f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md @@ -0,0 +1,138 @@ +--- +id: 5d822fd413a79914d39e98d4 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. + +# --hints-- + +You should use a class selector to style `.bb1a`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); +``` + +You should give `.bb1a` a `width` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); +``` + +You should give `.bb1a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); +``` + +You should use a class selector to style `.bb1b`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); +``` + +You should give `.bb1b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); +``` + +You should give `.bb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); +``` + +You should use a class selector to style `.bb1c`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); +``` + +You should give `.bb1c` a `width` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); +``` + +You should give `.bb1c` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); +``` + +You should use a class selector to style `.bb1d`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); +``` + +You should give `.bb1d` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); +``` + +You should give `.bb1d` a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md new file mode 100644 index 00000000000..c97b6c1c185 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md @@ -0,0 +1,112 @@ +--- +id: 5d822fd413a79914d39e98d5 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Give your `.bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. + +# --hints-- + +You should not change the `.bb1` `width` or `height` properties. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.width, '10%'); +assert.equal(bb1Style?.height, '70%'); +``` + +You should give the `.bb1` element a `display` of `flex`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.display, 'flex'); +``` + +You should give the `.bb1` element a `flex-direction` of `column`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.flexDirection, 'column'); +``` + +You should give the `.bb1` element a `align-items` of `center`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.alignItems, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md new file mode 100644 index 00000000000..666ecaffb1d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md @@ -0,0 +1,103 @@ +--- +id: 5d822fd413a79914d39e98d6 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now you have something that is resembling a building. You are ready to create your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`. + +# --hints-- + +You should create a new variable named `--building-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); +``` + +You should define the `--building-color1` variable within `.bb1`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +``` + +You should give `--building-color1` a value of `#999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md new file mode 100644 index 00000000000..b993c80f852 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md @@ -0,0 +1,100 @@ +--- +id: 5d822fd413a79914d39e98d7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on. + +Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class. + +# --hints-- + +The `background-color` of the `.bb1a` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md new file mode 100644 index 00000000000..ac248954dae --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md @@ -0,0 +1,124 @@ +--- +id: 5d822fd413a79914d39e98d8 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. + +# --hints-- + +The `background-color` of the `.bb1b` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +The `background-color` of the `.bb1c` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +The `background-color` of the `.bb1d` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md new file mode 100644 index 00000000000..aa956d7889c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md @@ -0,0 +1,99 @@ +--- +id: 5d822fd413a79914d39e98d9 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. + +# --hints-- + +You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +--fcc-editable-region-- + --building-color1: #999; +--fcc-editable-region-- +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md new file mode 100644 index 00000000000..2bdce33b6e4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md @@ -0,0 +1,133 @@ +--- +id: 5d822fd413a79914d39e98da +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. + +# --hints-- + +You should create a `div` with a class of `bb2`. + +```js +assert.exists(document.querySelector('div.bb2')); +``` + +You should create a `div` with a class of `bb3`. + +```js +assert.exists(document.querySelector('div.bb3')); +``` + +You should create a `div` with a class of `bb4`. + +```js +assert.exists(document.querySelector('div.bb4')); +``` + +You should create 3 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 9); +``` + +You should place these `div` elements within the `.background-buildings` element. + +```js +assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); +``` + +You should place the elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md new file mode 100644 index 00000000000..242d5d9098d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md @@ -0,0 +1,133 @@ +--- +id: 5d822fd413a79914d39e98db +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. + +# --hints-- + +You should give `.bb2` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); +``` + +You should give `.bb2` a `height` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); +``` + +You should give `.bb3` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); +``` + +You should give `.bb3` a `height` of `55%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); +``` + +You should give `.bb4` a `width` of `11%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); +``` + +You should give `.bb4` a `height` of `58%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md new file mode 100644 index 00000000000..77305c578ea --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md @@ -0,0 +1,127 @@ +--- +id: 5d822fd413a79914d39e98dc +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +The buildings are currently stacked on top of each other. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class to fix that. This will use flexbox again to evenly space the buildings across the bottom of the element. + +# --hints-- + +You should add a `display` of `flex` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); +``` + +You should add an `align-items` of `flex-end` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); +``` + +You should add a `justify-content` of `space-evenly` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md new file mode 100644 index 00000000000..ffbc76b0b1c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md @@ -0,0 +1,142 @@ +--- +id: 5d822fd413a79914d39e98dd +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. + +# --hints-- + +You should add two new `div` elements before the `.bb1` element. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); +``` + +You should add one new `div` element between the `.bb3` and `.bb4` element. + +```js +assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); +``` + +You should add two new `div` elements after the `.bb4` element. + +```js +const bb4 = document.querySelector('.bb4'); +assert.exists(bb4?.nextElementSibling); +assert.exists(bb4?.nextElementSibling?.nextElementSibling); +``` + +You should add 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 14); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md new file mode 100644 index 00000000000..63a0d7177a1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md @@ -0,0 +1,140 @@ +--- +id: 5d822fd413a79914d39e98de +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create a new variable below the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. + +# --hints-- + +You should define a new property variable called `--building-color2`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); +``` + +You should give `--building-color2` a value of `#66cc99`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); +``` + +You should set the `background-color` of `.bb2`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color2` variable. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md new file mode 100644 index 00000000000..18991ab296c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md @@ -0,0 +1,124 @@ +--- +id: 5d822fd413a79914d39e98df +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. + +# --hints-- + +You should add a fallback value of `green` to the `background-color` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md new file mode 100644 index 00000000000..8eacd57f64d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md @@ -0,0 +1,142 @@ +--- +id: 5d822fd413a79914d39e98e0 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. + +# --hints-- + +You should define a new property variable called `--building-color3`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); +``` + +You should give `--building-color3` a value of `#cc6699`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should set the `background-color` of `.bb3`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md new file mode 100644 index 00000000000..1ffeb2c17bb --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md @@ -0,0 +1,155 @@ +--- +id: 5d822fd413a79914d39e98e1 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. + +# --hints-- + +You should declare a `:root` selector at the top of the stylesheet. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); +``` + +You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); +``` + +You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); +``` + +You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should remove the custom property variables from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md new file mode 100644 index 00000000000..f8a42aa5898 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md @@ -0,0 +1,135 @@ +--- +id: 5d822fd413a79914d39e98e2 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. + +# --hints-- + +You should remove the fallback in the `background-color` from `.bb2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)'); +``` + +You should remove the fallback in the `background-color` from `.bb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md new file mode 100644 index 00000000000..4c1a12a629e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md @@ -0,0 +1,144 @@ +--- +id: 5d822fd413a79914d39e98e3 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. + +# --hints-- + +You should define a new property variable called `--building-color4`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); +``` + +You should give `--building-color4` a value of `#538cc6` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); +``` + +You should add `background-color: var(--building-color4)` in the `.bb4` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md new file mode 100644 index 00000000000..2950703ad30 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md @@ -0,0 +1,147 @@ +--- +id: 5d822fd413a79914d39e98e4 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div')?.length, 15); +``` + +The new `div` should come after the `div.background-buildings` element. + +```js +assert.exists(document.querySelector('div.background-buildings + div')); +``` + +Your new `div` should have a class of `foreground-buildings`. + +```js +assert.exists(document.querySelector('div.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md new file mode 100644 index 00000000000..e19eefd591d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md @@ -0,0 +1,161 @@ +--- +id: 5d822fd413a79914d39e98e5 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. + +# --hints-- + +You should use a `.foreground-buildings` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should give the `.foreground-buildings` element a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); +``` + +You should give the `.foreground-buildings` element a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); +``` + +You should give the `.foreground-buildings` element a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); +``` + +You should give the `.foreground-buildings` element a `top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md new file mode 100644 index 00000000000..d434e2aeb01 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md @@ -0,0 +1,192 @@ +--- +id: 5d822fd413a79914d39e98e6 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. + +# --hints-- + +You should create a new `div` with a class of `fb1`. + +```js +assert.exists(document.querySelector('div.fb1')); +``` + +You should create a new `div` with a class of `fb2`. + +```js +assert.exists(document.querySelector('div.fb2')); +``` + +You should create a new `div` with a class of `fb3`. + +```js +assert.exists(document.querySelector('div.fb3')); +``` + +You should create a new `div` with a class of `fb4`. + +```js +assert.exists(document.querySelector('div.fb4')); +``` + +You should create a new `div` with a class of `fb5`. + +```js +assert.exists(document.querySelector('div.fb5')); +``` + +You should create a new `div` with a class of `fb6`. + +```js +assert.exists(document.querySelector('div.fb6')); +``` + +You should place these new `div` elements within the `.foreground-buildings` element. + +```js +assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb2')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb3')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb4')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md new file mode 100644 index 00000000000..d0b1000a10b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md @@ -0,0 +1,253 @@ +--- +id: 5d822fd413a79914d39e98e7 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. + +# --hints-- + +You should create a `.fb1` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); +``` + +You should give the `.fb1` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); +``` + +You should give the `.fb1` selector a `height` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); +``` + +You should create a `.fb2` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); +``` + +You should give the `.fb2` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); +``` + +You should give the `.fb2` selector a `height` of `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); +``` + +You should create a `.fb3` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); +``` + +You should give the `.fb3` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); +``` + +You should give the `.fb3` selector a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); +``` + +You should create a `.fb4` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); +``` + +You should give the `.fb4` selector a `width` of `8%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); +``` + +You should give the `.fb4` selector a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); +``` + +You should create a `.fb5` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); +``` + +You should give the `.fb5` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); +``` + +You should give the `.fb5` selector a `height` of `33%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); +``` + +You should create a `.fb6` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); +``` + +You should give the `.fb6` selector a `width` of `9%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); +``` + +You should give the `.fb6` selector a `height` of `38%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md new file mode 100644 index 00000000000..3714432e6f6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md @@ -0,0 +1,190 @@ +--- +id: 5d822fd413a79914d39e98e8 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. + +# --hints-- + +You should give `.foreground-buildings` a `display` property of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); +``` + +You should give `.foreground-buildings` an `align-items` property of `flex-end`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); +``` + +You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md new file mode 100644 index 00000000000..19c5650bdf4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e98e9 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. + +# --hints-- + +You should not remove the `.foreground-buildings` declaration. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should remove the `position` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); +``` + +You should remove the `top` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); +``` + +You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.position, 'absolute'); +``` + +You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.top, '0px'); +``` + +You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.exists(eitherOr()); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md new file mode 100644 index 00000000000..a7ba8c36511 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md @@ -0,0 +1,181 @@ +--- +id: 5d822fd413a79914d39e98ea +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. + +# --hints-- + +You should delete the whole `.foreground-buildings` style declaration. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md new file mode 100644 index 00000000000..8d06cc61809 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md @@ -0,0 +1,203 @@ +--- +id: 5d822fd413a79914d39e98eb +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. + +# --hints-- + +You should give `.fb1` a `background-color` using `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)'); +``` + +You should give `.fb2` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)'); +``` + +You should give `.fb3` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +You should give `.fb4` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +You should give `.fb5` a `background-color` using `--building-color2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)'); +``` + +You should give `.fb6` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md new file mode 100644 index 00000000000..8143d18ec3c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md @@ -0,0 +1,203 @@ +--- +id: 5d822fd413a79914d39e98ec +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. + +# --hints-- + +You should add two `div` elements as the first children of `.foreground-buildings`. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); +``` + +You should add one `div` element between `.fb2` and `.fb3`. + +```js +assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); +``` + + +You should add two `div` elements as the last children of `.foreground-buildings`. + +```js +const fb6 = document.querySelector('.fb6'); +assert.exists(fb6?.nextElementSibling); +assert.exists(fb6?.nextElementSibling?.nextElementSibling); +``` + +You should have added 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 26); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md new file mode 100644 index 00000000000..68bb2249960 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98ed +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. + +# --hints-- + +You should give `.fb4` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); +``` + +You should give `.fb4` a `left` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); +``` + +You should give `.fb5` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); +``` + +You should give `.fb5` a `right` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md new file mode 100644 index 00000000000..bd0e16a4841 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md @@ -0,0 +1,196 @@ +--- +id: 5d822fd413a79914d39e98ee +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. + +# --hints-- + +You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. + +```js +assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); +``` + +You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. + +```js +assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md new file mode 100644 index 00000000000..0512796cfb2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md @@ -0,0 +1,197 @@ +--- +id: 5d822fd413a79914d39e98ef +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. + +# --hints-- + +You should create a new variable in `:root` called `--window-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); +``` + +You should give the property variable `--window-color1` a value of `black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md new file mode 100644 index 00000000000..e07315019ab --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md @@ -0,0 +1,218 @@ +--- +id: 5d822fd413a79914d39e98f0 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: + +```css +gradient-type( + color1, + color2 +); +``` + +In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. + +# --hints-- + +You should apply a `background` to `.bb1a`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +``` + +You should give the `background` a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); +``` + +You should give the `background` a `linear-gradient` starting from `--building-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); +``` + +You should give the `background` a `linear-gradient` ending at `--window-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md new file mode 100644 index 00000000000..e658de33d12 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e98f1 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector. + +# --hints-- + +You should create a new class selector called `bb1-window`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); +``` + +You should move the `height` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); +``` + +You should move the `background` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +You should not move the `background-color` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should not move the `width` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + + +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md new file mode 100644 index 00000000000..5f21d781a13 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md @@ -0,0 +1,237 @@ +--- +id: 5d822fd413a79914d39e98f2 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. + +# --hints-- + +You should not remove the `bb1a` class. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should add the `bb1-window` class to the `.bb1a` element. + +```js +assert.exists(document.querySelector('div.bb1a.bb1-window')); +``` + +You should not remove the `bb1b` class. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should add the `bb1-window` class to the `.bb1b` element. + +```js +assert.exists(document.querySelector('div.bb1b.bb1-window')); +``` + +You should not remove the `bb1c` class. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should add the `bb1-window` class to the `.bb1c` element. + +```js +assert.exists(document.querySelector('div.bb1c.bb1-window')); +``` + +You should not change the `.bb1d` element. + +```js +assert.exists(document.querySelector('div.bb1d')); +assert.notExists(document.querySelector('div.bb1d.bb1-window')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md new file mode 100644 index 00000000000..5b832df0f87 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e98f3 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. + +# --hints-- + +You should remove the `background-color` from `.bb1a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); +``` + +You should remove the `background-color` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); +``` + +You should remove the `background-color` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md new file mode 100644 index 00000000000..6059b2d60a3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md @@ -0,0 +1,227 @@ +--- +id: 5d822fd413a79914d39e98f4 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Gradients can use as many colors as you want like this: + +```css +gradient-type( + color1, + color2, + color3 +); +``` + +Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. + +# --hints-- + +You should use the `background` on `.bb1d`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); +``` + +You should give the `background` property a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); +``` + +You should use `orange` as the first color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); +``` + +You should use `--building-color1` as the second color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); +``` + +You should use `--window-color1` as the third color in the `linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md new file mode 100644 index 00000000000..6e64130d7cb --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md @@ -0,0 +1,198 @@ +--- +id: 5d822fd413a79914d39e98f5 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. + +# --hints-- + +You should remove the `background-color` property and value from `.bb1d` + +```js +assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md new file mode 100644 index 00000000000..ac074fd614c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md @@ -0,0 +1,207 @@ +--- +id: 5d822fd413a79914d39e98f6 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +You can specify where you want a gradient transition to complete by adding it to the color like this: + +```css +gradient-type( + color1, + color2 20%, + color3 +); +``` + +Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. + +# --hints-- + +You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md new file mode 100644 index 00000000000..9e7d9a17d54 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md @@ -0,0 +1,203 @@ +--- +id: 5d822fd413a79914d39e98f7 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. + +# --hints-- + +You should remove `orange` from the `linear-gradient`. + +```js +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); +``` + +You should change the now first `linear-gradient` color to transition at `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1) 80%, + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md new file mode 100644 index 00000000000..606401d03e2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md @@ -0,0 +1,210 @@ +--- +id: 5d822fd413a79914d39e98f8 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. + +# --hints-- + +You should add two `div` elements to `.bb2`. + +```js +assert.equal(document.querySelector('div.bb2')?.children?.length, 2); +``` + +You should give the first `div` a class of `bb2a`. + +```js +assert.exists(document.querySelector('div.bb2a')); +``` + +You should give the second `div` a class of `bb2b`. + +```js +assert.exists(document.querySelector('div.bb2b')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md new file mode 100644 index 00000000000..82bda67e3e4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md @@ -0,0 +1,207 @@ +--- +id: 5d822fd413a79914d39e98f9 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. + +# --hints-- + +You should give `.bb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); +``` + +You should give `.bb2b` a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md new file mode 100644 index 00000000000..ab1fca84681 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md @@ -0,0 +1,211 @@ +--- +id: 5d822fd413a79914d39e98fa +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. + +# --hints-- + +You should create a new property variable called `window-color2` within `:root`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); +``` + +You should give `window-color2` a value of `#8cd9b3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb2b { + width: 100%; + height: 100%; +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md new file mode 100644 index 00000000000..89c7828a13d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md @@ -0,0 +1,240 @@ +--- +id: 5d822fd413a79914d39e98fb +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Gradient transitions often gradually change from one color to another. You can make the change a solid line like this: + +```css +linear-gradient( + var(--first-color) 0%, + var(--first-color) 40%, + var(--second-color) 40%, + var(--second-color) 80% +); +``` + +Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. + +# --hints-- + +You should give `.bb2b` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); +``` + +You should use a `linear-gradient` on the `background`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); +``` + +You should use `--building-color2` from `0%` to `6%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); +``` + +You should use `--window-color2` from `6%` to `9%`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); +``` + +`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md new file mode 100644 index 00000000000..e61306e210a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md @@ -0,0 +1,211 @@ +--- +id: 5d822fd413a79914d39e98fc +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. + +# --hints-- + +You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md new file mode 100644 index 00000000000..5f5aeb1a36c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md @@ -0,0 +1,209 @@ +--- +id: 5d822fd413a79914d39e98fd +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. + +# --hints-- + +You should remove the `background-color` from `.bb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md new file mode 100644 index 00000000000..fa43165a670 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md @@ -0,0 +1,260 @@ +--- +id: 5d822fd413a79914d39e98fe +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Add these properties to `.bb2a`: + +```css +margin: auto; +width: 5vw; +height: 5vw; +border-top: 1vw solid #000; +border-bottom: 1vw solid #000; +border-left: 1vw solid #999; +border-right: 1vw solid #999; +``` + +After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. + +# --hints-- + +You should give `.bb2a` a `margin` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); +``` + +You should give `.bb2a` a `width` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); +``` + +You should give `.bb2a` a `height` of `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); +``` + +You should give `.bb2a` a `border-top` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-bottom` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-left` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); +``` + +You should give `.bb2a` a `border-right` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md new file mode 100644 index 00000000000..c7755836830 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md @@ -0,0 +1,238 @@ +--- +id: 5d822fd413a79914d39e98ff +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. + +# --hints-- + +You should remove the `width` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); +``` + +You should remove the `height` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); +``` + +You should change the `border-left` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); +``` + +You should change the `border-right` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + width: 5vw; + height: 5vw; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 1vw solid #999; + border-right: 1vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md new file mode 100644 index 00000000000..f110fe4f8be --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md @@ -0,0 +1,224 @@ +--- +id: 5d822fd413a79914d39e9900 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. + +# --hints-- + +You should change the `border-left` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); +``` + +You should change the `border-right` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid #999; + border-right: 5vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md new file mode 100644 index 00000000000..93559351e86 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md @@ -0,0 +1,224 @@ +--- +id: 5d822fd413a79914d39e9901 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. + +# --hints-- + +You should remove the `margin` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); +``` + +You should remove the `border-top` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md new file mode 100644 index 00000000000..01485d6fc62 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md @@ -0,0 +1,227 @@ +--- +id: 5d822fd413a79914d39e9902 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. + +# --hints-- + +You should change `border-bottom` to use `5vh`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); +``` + +You should change `border-bottom` to use `--building-color2`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); +``` + +`border-bottom` should be `5vh solid var(--building-color2)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md new file mode 100644 index 00000000000..a84664027d0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9903 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. + +# --hints-- + +You should define a new property variable `--window-color3`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); +``` + +You should give `--window-color3` a value of `#d98cb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md new file mode 100644 index 00000000000..826e82e8004 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md @@ -0,0 +1,245 @@ +--- +id: 5d822fd413a79914d39e9904 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: + +```css +gradient-type( + direction, + color1, + color2 +); +``` + +Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. + +# --hints-- + +You should give `.bb3` a `background` using `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); +``` + +You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use `--building-color3` for the first two colors. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); +``` + +You should use `--window-color3` at `15%` for the third color. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md new file mode 100644 index 00000000000..be8f279c220 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9905 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. + +# --hints-- + +You should remove the `background-color` from `.bb3`. + +```js +assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md new file mode 100644 index 00000000000..28fd7889ce6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md @@ -0,0 +1,249 @@ +--- +id: 5d822fd413a79914d39e9906 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. + +# --hints-- + +You should add three `div` elements within `.bb4`. + +```js +assert.equal(document.querySelector("div.bb4")?.children?.length, 3); +``` + +You should give the first new `div` a class of `bb4a`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the second new `div` a class of `bb4b`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the third new `div` a class of `bb4c`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. + +```js +assert.exists(document.querySelector("div.bb4a + div.bb4b")); +assert.exists(document.querySelector("div.bb4b + div.bb4c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md new file mode 100644 index 00000000000..b97da80b656 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md @@ -0,0 +1,258 @@ +--- +id: 5d822fd413a79914d39e9907 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. + +# --hints-- + +You should give `.bb4a` a `width` of `3%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); +``` + +You should give `.bb4a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); +``` + +You should give `.bb4b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); +``` + +You should give `.bb4b` a `height` of `5%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); +``` + +You should give `.bb4c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); +``` + +You should give `.bb4c` a `height` of `85%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md new file mode 100644 index 00000000000..74f1fa92aaa --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md @@ -0,0 +1,258 @@ +--- +id: 5d822fd413a79914d39e9908 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. + +# --hints-- + +You should remove the `background-color` from `.bb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); +``` + +You should give `.bb4a` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4b` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4c` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.bb4a { + width: 3%; + height: 10%; +} + +.bb4b { + width: 80%; + height: 5%; +} + +.bb4c { + width: 100%; + height: 85%; +} +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md new file mode 100644 index 00000000000..c1f05cb180c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md @@ -0,0 +1,245 @@ +--- +id: 5d822fd413a79914d39e9909 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. + +# --hints-- + +You should create a new class declaration called `building-wrap`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md new file mode 100644 index 00000000000..91c5eaceb1f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md @@ -0,0 +1,277 @@ +--- +id: 5d822fd413a79914d39e990a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. + +# --hints-- + +You should remove `display` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); +``` + +You should move `display` with a value of `flex` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); +``` + +You should remove `flex-direction` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); +``` + +You should move `flex-direction` with a value of `column` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); +``` + +You should remove `align-items` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); +``` + +You should move `align-items` with a value of `center` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.building-wrap { + +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md new file mode 100644 index 00000000000..6c551ec4605 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md @@ -0,0 +1,254 @@ +--- +id: 5d822fd413a79914d39e990b +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. + +# --hints-- + +You should add `building-wrap` to the `.bb1` element. + +```js +assert.exists(document.querySelector("div.bb1.building-wrap")); +``` + +You should add `building-wrap` to the `.bb4` element. + +```js +assert.exists(document.querySelector("div.bb4.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md new file mode 100644 index 00000000000..207b0898467 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md @@ -0,0 +1,253 @@ +--- +id: 5d822fd413a79914d39e990c +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. + +# --hints-- + +You should define a new property variable `--window-color4`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); +``` + +You should give `--window-color4` a value of `#8cb3d9`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md new file mode 100644 index 00000000000..c792b7c315e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md @@ -0,0 +1,255 @@ +--- +id: 5d822fd413a79914d39e990d +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. + +# --hints-- + +You should add four `div` elements to `.bb4c`. + +```js +assert.equal(document.querySelector(".bb4c")?.children?.length, 4); +``` + +You should give each new `div` a class of `bb4-window`. + +```js +assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md new file mode 100644 index 00000000000..03e6774811d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md @@ -0,0 +1,265 @@ +--- +id: 5d822fd413a79914d39e990e +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. + +# --hints-- + +You should give `.bb4-window` a `width` of `18%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); +``` + +You should give `.bb4-window` a `height` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); +``` + +You should give `.bb4-window` a `background-color` of `--window-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md new file mode 100644 index 00000000000..b0e6c9ac647 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md @@ -0,0 +1,286 @@ +--- +id: 5d822fd413a79914d39e990f +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`, and add these properties to it: + +```css +display: flex; +align-items: center; +justify-content: space-evenly; +``` + +This will be used in a few places to center window elements vertically, and evenly space them in their parent. + +# --hints-- + +You should create a `.window-wrap` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); +``` + +You should give `.window-wrap` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); +``` + +You should give `.window-wrap` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); +``` + +You should give `.window-wrap` a `justify-content` of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md new file mode 100644 index 00000000000..5e0b774f8ab --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md @@ -0,0 +1,266 @@ +--- +id: 5d822fd413a79914d39e9910 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the new `window-wrap` class to the `.bb4c` element. + +# --hints-- + +You should add a class of `window-wrap` to `.bb4c`. + +```js +assert.exists(document.querySelector("div.bb4c.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md new file mode 100644 index 00000000000..2331da101b7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md @@ -0,0 +1,291 @@ +--- +id: 5d822fd413a79914d39e9911 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. + +# --hints-- + +You should add three `div` elements within `.fb1`. + +```js +assert.equal(document.querySelector("div.fb1")?.children?.length, 3); +``` + +You should give the first new `div` a class of `fb1a`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1a")); +``` + +You should give the second new `div` a class of `fb1b`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1b")); +``` + +You should give the third new `div` a class of `fb1c`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1c")); +``` + +You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. + +```js +assert.exists(document.querySelector("div.fb1a + div.fb1b")); +assert.exists(document.querySelector("div.fb1b + div.fb1c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md new file mode 100644 index 00000000000..05d085a1be7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md @@ -0,0 +1,287 @@ +--- +id: 5d822fd413a79914d39e9912 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. + +# --hints-- + +You should give `.fb1b` a `width` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); +``` + +You should give `.fb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); +``` + +You should give `.fb1c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); +``` + +You should give `.fb1c` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md new file mode 100644 index 00000000000..d451d028ebe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md @@ -0,0 +1,280 @@ +--- +id: 5d822fd413a79914d39e9913 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Add the `building-wrap` class to the `.fb1` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb1`. + +```js +assert.exists(document.querySelector("div.fb1.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} + +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md new file mode 100644 index 00000000000..5cb763bcec7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md @@ -0,0 +1,284 @@ +--- +id: 5d822fd413a79914d39e9914 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Move the `background-color` property and value from `.fb1` to `.fb1b`. + +# --hints-- + +You should remove `background-color` from `.fb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); +``` + +You should add a `background-color` of `--building-color4` to `.fb1b`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md new file mode 100644 index 00000000000..e476f5d90bc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md @@ -0,0 +1,391 @@ +--- +id: 5d822fd413a79914d39e9915 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +You don't need the `background-color` for this building anymore so you can remove that property. + +# --hints-- + +You should remove the `background-color` of `.fb5`. + +```js +assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md new file mode 100644 index 00000000000..8685190853e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md @@ -0,0 +1,297 @@ +--- +id: 5d822fd413a79914d39e9916 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. + +Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. + +# --hints-- + +You should give `.fb1c` a `background` with a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); +``` + +You should use a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); +``` + +You should use a second color of `transparent` from `10%` to `15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md new file mode 100644 index 00000000000..226aa2791df --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md @@ -0,0 +1,307 @@ +--- +id: 5d822fd413a79914d39e9917 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +You can add multiple gradients to an element by separating them with a comma (`,`) like this: + +```css +gradient1( + colors +), +gradient2( + colors +); +``` + +Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. + +# --hints-- + +You should not alter the first `repeating-linear-gradient`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); +``` + +You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); +``` + +You should use a second color of `--window-color4` from `10%` to `90%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ) +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md new file mode 100644 index 00000000000..891c49a2e13 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md @@ -0,0 +1,298 @@ +--- +id: 5d822fd413a79914d39e9918 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. + +# --hints-- + +You should give `.fb1a` a `border-bottom`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); +``` + +You should use a `border-bottom` of `7vh solid var(--building-color4)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md new file mode 100644 index 00000000000..70f365e2891 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md @@ -0,0 +1,301 @@ +--- +id: 5d822fd413a79914d39e9919 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. + +# --hints-- + +You should give `.fb1a` a `border-left` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); +``` + +You should give `.fb1a` a `border-right` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- +.fb1a { + border-bottom: 7vh solid var(--building-color4); +} +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md new file mode 100644 index 00000000000..99f5abea099 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md @@ -0,0 +1,312 @@ +--- +id: 5d822fd413a79914d39e991a +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. + +# --hints-- + +You should add two `div` elements within `.fb2`. + +```js +assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb2a`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2a")); +assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); +``` + +You should give the second new `div` a class of `fb2b`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md new file mode 100644 index 00000000000..f1cc76cabd4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md @@ -0,0 +1,314 @@ +--- +id: 5d822fd413a79914d39e991b +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. + +# --hints-- + +You should give `.fb2a` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); +``` + +You should give `.fb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); +``` + +You should give `.fb2b` a `height` of `75%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md new file mode 100644 index 00000000000..e047f9f3021 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md @@ -0,0 +1,317 @@ +--- +id: 5d822fd413a79914d39e991c +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. + +# --hints-- + +You should add three `div` elements within `.fb2b`. + +```js +assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); +``` + +You should give the three new `div` elements each a class of `fb2-window`. + +```js +assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md new file mode 100644 index 00000000000..75eac697004 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md @@ -0,0 +1,315 @@ +--- +id: 5d822fd413a79914d39e991d +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add your `window-wrap` class to `.fb2b` to position the new window elements. + +# --hints-- + +You should add the class `window-wrap` to `.fb2b`. + +```js +assert.exists(document.querySelector("div.fb2b.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md new file mode 100644 index 00000000000..68bea5beb87 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md @@ -0,0 +1,326 @@ +--- +id: 5d822fd413a79914d39e991e +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. + +# --hints-- + +You should give the `.fb2-window` elements a `width` of `22%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); +``` + +You should give the `.fb2-window` elements a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); +``` + +You should give the `.fb2-window` elements a `background-color` of `--window-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md new file mode 100644 index 00000000000..e4198afe229 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md @@ -0,0 +1,324 @@ +--- +id: 5d822fd413a79914d39e991f +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. + +# --hints-- + +You should remove the `background-color` property from `.fb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); +``` + +You should give `.fb2b` a `background-color` of `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md new file mode 100644 index 00000000000..3ccdb0dbcc5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md @@ -0,0 +1,330 @@ +--- +id: 5d822fd413a79914d39e9920 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. + +# --hints-- + +You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); +``` + +You should give `.fb2a` a `border-left` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); +``` + +You should give `.fb2a` a `border-right` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} +--fcc-editable-region-- +.fb2a { + width: 100%; +} +--fcc-editable-region-- +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md new file mode 100644 index 00000000000..3cff4a2acda --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md @@ -0,0 +1,348 @@ +--- +id: 5d822fd413a79914d39e9921 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. + +# --hints-- + +You should add four `div` elements within `.fb3`. + +```js +assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); +``` + +You should give the first new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); +``` + +You should give the second new `div` a class of `fb3b`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); +``` + +You should give the third new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); +``` + +You should give the fourth new `div` a class of `fb3b`. + +```js +assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md new file mode 100644 index 00000000000..0fa90cef88b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md @@ -0,0 +1,347 @@ +--- +id: 5d822fd413a79914d39e9922 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. + +# --hints-- + +You should give `.fb3a` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); +``` + +You should give `.fb3a` a `height` of `15%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); +``` + +You should give `.fb3b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); +``` + +You should give `.fb3b` a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md new file mode 100644 index 00000000000..c6942ea1b38 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md @@ -0,0 +1,348 @@ +--- +id: 5d822fd413a79914d39e9923 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. + +# --hints-- + +You should remove the `background-color` from `.fb3`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); +``` + +You should give `.fb3a` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +You should give `.fb3b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3a { + width: 80%; + height: 15%; +} + +.fb3b { + width: 100%; + height: 35%; +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md new file mode 100644 index 00000000000..a7f0e2cb952 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md @@ -0,0 +1,340 @@ +--- +id: 5d822fd413a79914d39e9924 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Add your `building-wrap` class to the `.fb3` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb3`. + +```js +assert.exists(document.querySelector("div.fb3.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md new file mode 100644 index 00000000000..19ff10935fc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md @@ -0,0 +1,346 @@ +--- +id: 5d822fd413a79914d39e9925 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. + +# --hints-- + +You should add three `div` elements within the first `.fb3a` element. + +```js +assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); +``` + +You should give each new `div` a class of `fb3-window`. + +```js +assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md new file mode 100644 index 00000000000..7c0132cbbd5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md @@ -0,0 +1,355 @@ +--- +id: 5d822fd413a79914d39e9926 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. + +# --hints-- + +You should give `.fb3-window` a `width` of `25%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); +``` + +You should give `.fb3-window` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); +``` + +You should give `.fb3-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md new file mode 100644 index 00000000000..ed213fde285 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md @@ -0,0 +1,350 @@ +--- +id: 5d822fd413a79914d39e9927 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add your `window-wrap` class to the `.fb3a` element to center and space the windows. + +# --hints-- + +You should give `.fb3a` a class of `window-wrap`. + +```js +assert.exists(document.querySelector("div.fb3a.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md new file mode 100644 index 00000000000..456c70cfb9f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md @@ -0,0 +1,349 @@ +--- +id: 5d822fd413a79914d39e9928 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`. + +# --hints-- + +You should change the value of `--window-color1` to `#bb99ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md new file mode 100644 index 00000000000..ad6a18db3d8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md @@ -0,0 +1,362 @@ +--- +id: 5d822fd413a79914d39e9929 +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. + +# --hints-- + +You should add two `div` elements within `.fb4`. + +```js +assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb4a`. + +```js +assert.exists(document.querySelector("div.fb4a")); +``` + +You should give the second new `div` a class of `fb4b`. + +```js +assert.exists(document.querySelector("div.fb4b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md new file mode 100644 index 00000000000..7c1fd3dfc0a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md @@ -0,0 +1,359 @@ +--- +id: 5d822fd413a79914d39e992a +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Give `.fb4b` a `width` of `100%` and `height` of `89%`. + +# --hints-- + +You should give `.fb4b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); +``` + +You should give `.fb4b` a `height` of `89%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md new file mode 100644 index 00000000000..6ec1e954b18 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md @@ -0,0 +1,361 @@ +--- +id: 5d822fd413a79914d39e992b +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. + +# --hints-- + +You should remove the `background-color` from `.fb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); +``` + +You should give `.fb4b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md new file mode 100644 index 00000000000..1548769e3c8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md @@ -0,0 +1,364 @@ +--- +id: 5d822fd413a79914d39e992c +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. + +# --hints-- + +You should add six `div` elements within `.fb4b`. + +```js +assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); +``` + +You should give each new `div` a class of `fb4-window`. + +```js +assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md new file mode 100644 index 00000000000..6ddb73f13b4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md @@ -0,0 +1,377 @@ +--- +id: 5d822fd413a79914d39e992d +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. + +# --hints-- + +You should give `.fb4-window` a `width` of `30%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); +``` + +You should give `.fb4-window` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); +``` + +You should give `.fb4-window` a `border-radius` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md new file mode 100644 index 00000000000..3fd53b9a1ec --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md @@ -0,0 +1,374 @@ +--- +id: 5d822fd413a79914d39e992e +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. + +# --hints-- + +You should give `.fb4-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +You should give `.fb4-window` a `margin` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md new file mode 100644 index 00000000000..d3624b3cfda --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md @@ -0,0 +1,377 @@ +--- +id: 5d822fd413a79914d39e992f +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Add `display: flex` and `flex-wrap: wrap` to the window container. This will put your windows side by side, and then push them down to a new row when they don't fit. + +# --hints-- + +You should give `.fb4b` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); +``` + +You should give `.fb4b` a `flex-wrap` of `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md new file mode 100644 index 00000000000..997ee5ecec0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md @@ -0,0 +1,381 @@ +--- +id: 5d822fd413a79914d39e9930 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. + +# --hints-- + +You should give `.fb4a` a `border-top` of `5vh solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") +``` + +You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md new file mode 100644 index 00000000000..742b4250c6c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md @@ -0,0 +1,404 @@ +--- +id: 5d822fd413a79914d39e9931 +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +You can remove the `background-color` for this building now, since it isn't needed. + +# --hints-- + +You should remove the `background-color` of `.fb6`. + +```js +assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md new file mode 100644 index 00000000000..80bdfe3d777 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md @@ -0,0 +1,396 @@ +--- +id: 5d822fd413a79914d39e9932 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. + +# --hints-- + +You should give `.fb5` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); +``` + +You should give the `background` a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md new file mode 100644 index 00000000000..f3731819799 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9933 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. + +# --hints-- + +You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ) +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md new file mode 100644 index 00000000000..3f172a0388a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9934 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. + +# --hints-- + +You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md new file mode 100644 index 00000000000..ef5b15a88a7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9935 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. + +# --hints-- + +You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ) +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md new file mode 100644 index 00000000000..9d8a3c2d880 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9936 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. + +# --hints-- + +You should remove the `border` from the `*` selector. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} +--fcc-editable-region-- +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md new file mode 100644 index 00000000000..0c9bd249eb4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md @@ -0,0 +1,403 @@ +--- +id: 5d822fd413a79914d39e9937 +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. + +# --hints-- + +You should add a class of `sky` to `.background-buildings`. + +```js +assert.exists(document.querySelector("div.background-buildings.sky")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md new file mode 100644 index 00000000000..0c60ad6415d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md @@ -0,0 +1,421 @@ +--- +id: 5d822fd413a79914d39e9938 +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. + +# --hints-- + +You should give `.sky` a `radial-gradient` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); +``` + +You should give the `radial-gradient` a first color of `#ffcf33`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); +``` + +You should give the `radial-gradient` a second color of `#ffff66` at `21%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); +``` + +You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md new file mode 100644 index 00000000000..cb07a8fde0b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md @@ -0,0 +1,410 @@ +--- +id: 5d822fd413a79914d39e9939 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. + +# --hints-- + +You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- +.sky { + background: radial-gradient( + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md new file mode 100644 index 00000000000..12d39cb4c09 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md @@ -0,0 +1,422 @@ +--- +id: 5d822fd413a79914d39e993a +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +A media query can be used to change styles based on certain conditions, and they look like this: + +```css +@media (condition) { + +} +``` + +Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. + +# --hints-- + +You should add an empty media query with `max-width: 1000px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md new file mode 100644 index 00000000000..f43412ed800 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md @@ -0,0 +1,424 @@ +--- +id: 5d822fd413a79914d39e993b +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. + +Note: You are going to need to scroll past the editable region to copy the class. + +# --hints-- + +You should not delete the existing `.sky` declaration. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); +``` + +You should copy the existing `.sky` declaration into the media query. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- +@media (max-width: 1000px) { + +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md new file mode 100644 index 00000000000..6d77b62b471 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md @@ -0,0 +1,437 @@ +--- +id: 5d822fd413a79914d39e993c +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. + +# --hints-- + +You should change the first color values from `#ffcf33` to `#ccc`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); +``` + +You should change the second color value from `#ffff66` to `#445`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); +``` + +You should change the third color value from `#bbeeff` to `#223`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( +closest-corner circle at 15% 15%, +#ffcf33, +#ffcf33 20%, +#ffff66 21%, +#bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3), +var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( +90deg, +var(--building-color4), +var(--building-color4) 10%, +transparent 10%, +transparent 15% + ), + repeating-linear-gradient( +var(--building-color4), +var(--building-color4) 10%, +var(--window-color4) 10%, +var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 5%, +transparent 5%, +transparent 10% + ), + repeating-linear-gradient( +90deg, +var(--building-color2), +var(--building-color2) 12%, +var(--window-color2) 12%, +var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3) 10%, +transparent 10%, +transparent 30% + ), + repeating-linear-gradient( +var(--building-color3), +var(--building-color3) 10%, +var(--window-color3) 10%, +var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% +); + } +--fcc-editable-region-- +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md new file mode 100644 index 00000000000..1a90ae8e5b9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md @@ -0,0 +1,450 @@ +--- +id: 5d822fd413a79914d39e993d +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. + +# --hints-- + +You should add a `:root` selector to the media query. + +```js +assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined); +``` + +You should add `--building-color1` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); +``` + +You should add `--building-color2` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); +``` + +You should add `--building-color3` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); +``` + +You should add `--building-color4` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md new file mode 100644 index 00000000000..592c85e070d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md @@ -0,0 +1,862 @@ +--- +id: 5d822fd413a79914d39e993e +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. + +Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! + +# --hints-- + +You should add `--window-color1` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); +``` + +You should add `--window-color2` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); +``` + +You should add `--window-color3` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); +``` + +You should add `--window-color4` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + } +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + +# --solutions-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + --window-color1: #777; + --window-color2: #777; + --window-color3: #777; + --window-color4: #777; + } + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md new file mode 100644 index 00000000000..b97c418ae43 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md @@ -0,0 +1,112 @@ +--- +id: 60b69a66b6ddb80858c51578 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Start by setting up your HTML structure. Add a `` declaration and an `html` element with a `lang` attribute set to `en`. Within the `html` element, add a `head` element and a `body` element. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +Your `DOCTYPE` declaration should be at the beginning of your HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +Your `html` element should have an opening tag with a `lang` attribute of `en` + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md new file mode 100644 index 00000000000..f242bb58261 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md @@ -0,0 +1,63 @@ +--- +id: 60b69a66b6ddb80858c51579 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `Picasso Painting`. + +# --hints-- + +You should add exactly one `meta` element. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +Your `meta` element should have a `charset` attribute. + +```js +assert(document.querySelector('meta')?.getAttribute('charset')); +``` + +Your `charset` attribute should be set to `utf-8`. + +```js +assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +``` + +You should add exactly one `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +Your `title` element should have the text `Picasso Painting`. Note that spelling and casing matter. + +```js +assert(document.querySelector('title')?.innerText === 'Picasso Painting'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md new file mode 100644 index 00000000000..49fb512d9eb --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md @@ -0,0 +1,57 @@ +--- +id: 60b69a66b6ddb80858c5157a +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. + +Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +# --hints-- + +You should have two `link` elements. + +```js +assert(document.querySelectorAll('link').length === 2); +``` + +Your `link` element should have a `rel` of `stylesheet`. + +```js +assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); +``` + +Your `link` element should have an `href` of +`https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +```js +assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md new file mode 100644 index 00000000000..fb72bf110b0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md @@ -0,0 +1,50 @@ +--- +id: 60b69a66b6ddb80858c5157b +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. + +# --hints-- + +You should use the `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + + + +``` + +```css + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md new file mode 100644 index 00000000000..46bc4eac429 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md @@ -0,0 +1,51 @@ +--- +id: 60b69a66b6ddb80858c5157c +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Within your body tag, add a `div` element. Give it an `id` of `back-wall`. + +# --hints-- + +You should add exactly 1 `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the `id` value of `back-wall`. + +```js +assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md new file mode 100644 index 00000000000..bef108c50ee --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md @@ -0,0 +1,54 @@ +--- +id: 60b69a66b6ddb80858c5157d +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`. + +# --hints-- + +You should use a `#back-wall` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); +``` + +Your `#back-wall` selector should have a `background-color` of `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md new file mode 100644 index 00000000000..9902742c288 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md @@ -0,0 +1,56 @@ +--- +id: 60b69a66b6ddb80858c5157e +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the `back-wall` element a `width` of `100%` and a `height` of `60%`. + +# --hints-- + +You should set the `width` of the `#back-wall` selector to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); +``` + +You should set the `height` of the `#back-wall` selector to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md new file mode 100644 index 00000000000..e556983f277 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md @@ -0,0 +1,69 @@ +--- +id: 60b69a66b6ddb80858c5157f +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` property. + +Set the `position` property for the `back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container. + +When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `back-wall` to have a `top` value of `0`, and a `left` value of `0`. + + +# --hints-- + +Your `#back-wall` selector should have the `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); +``` + +Your `#back-wall` selector should have the `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); +``` + +Your `#back-wall` selector should have the `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md new file mode 100644 index 00000000000..fc2f26bd044 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md @@ -0,0 +1,59 @@ +--- +id: 60b69a66b6ddb80858c51580 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. + +Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects. + +Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. + +# --hints-- + +Your `#back-wall` selector should have the `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md new file mode 100644 index 00000000000..e3c0a6d7133 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md @@ -0,0 +1,68 @@ +--- +id: 60b69a66b6ddb80858c51581 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below your `back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters. + +# --hints-- + +You should only add one new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your new `div` element should come after your `#back-wall` element. + +```js +assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); +``` + +Your new `div` element should have the `class` set to `characters`. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+ --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md new file mode 100644 index 00000000000..cecb3afcc3f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md @@ -0,0 +1,70 @@ +--- +id: 60b69a66b6ddb80858c51582 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `characters` element, create another `div` with an `id` of `offwhite-character`. + +# --hints-- + +You should only create 1 additional `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +Your new `div` element should be nested in your `.characters` element. + +```js +assert(document.querySelector('.characters div')); +``` + +Your new `div` element should have an `id` of `offwhite-character`. + +```js +assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md new file mode 100644 index 00000000000..26e10dbd954 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -0,0 +1,84 @@ +--- +id: 60b69a66b6ddb80858c51583 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. + +# --hints-- + +You should add four `div` elements within your `.offwhite-character` element. + +```js +assert(document.querySelectorAll('#offwhite-character div').length === 4); +``` + +Your first new `div` element should have the `id` of `white-hat`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); +``` + +Your second new `div` element should have the `id` of `black-mask`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); +``` + +Your third new `div` element should have the `id` of `gray-instrument`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); +``` + +Your fourth new `div` element should have the `id` of `tan-table`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md new file mode 100644 index 00000000000..30d7ae1f208 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md @@ -0,0 +1,79 @@ +--- +id: 60b69a66b6ddb80858c51584 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +This character needs eyes. Create two `div` elements in the `black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order. + +# --hints-- + +You should create 2 `div` elements within your `#black-mask` element. + +```js +assert(document.querySelectorAll('#black-mask div').length === 2); +``` + +Your first new `div` should have the classes `eyes` and `left`. + +```js +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); +``` + +Your second new `div` should have the classes `eyes` and `right`. + +```js +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md new file mode 100644 index 00000000000..fe7c93d2a82 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md @@ -0,0 +1,74 @@ +--- +id: 60b69a66b6ddb80858c51585 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Create some "dots" for the instrument. Add five `div` elements within your `gray-instrument` element. Set the `class` of each to `black-dot`. + +# --hints-- + +You should have five new `div` elements within your `#gray-instrument` element. + +```js +assert(document.querySelectorAll('#gray-instrument div').length === 5); +``` + +Your five `div` elements should all have the class `black-dot`. + +```js +assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md new file mode 100644 index 00000000000..d5e2a92f017 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -0,0 +1,93 @@ +--- +id: 60b69a66b6ddb80858c51586 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Using an `id` selector, create a rule for your `offwhite-character` element. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`. + +# --hints-- + +You should use the `#offwhite-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); +``` + +Your `#offwhite-character` should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); +``` + +Your `#offwhite-character` should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); +``` + +Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md new file mode 100644 index 00000000000..a2f719e29e7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md @@ -0,0 +1,91 @@ +--- +id: 60b69a66b6ddb80858c51587 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Move the `offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`. + +# --hints-- + +Your `#offwhite-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); +``` + +Your `#offwhite-character` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); +``` + +Your `#offwhite-character` selector should have a `left` property set to `17.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md new file mode 100644 index 00000000000..92841c58470 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -0,0 +1,102 @@ +--- +id: 60b69a66b6ddb80858c51588 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Using an `id` selector, style your `white-hat` element. Give it a `width` and `height` of `0`, and a `border-style` of `solid`. + +# --hints-- + +You should use a `#white-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); +``` + +Your `#white-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); +``` + +Your `#white-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); +``` + +Your `#white-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md new file mode 100644 index 00000000000..5e6f8e7092c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -0,0 +1,88 @@ +--- +id: 60b69a66b6ddb80858c51589 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. + +# --hints-- + +Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md new file mode 100644 index 00000000000..eed022dadee --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md @@ -0,0 +1,107 @@ +--- +id: 60b69a66b6ddb80858c5158a +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. + +# --hints-- + +Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md new file mode 100644 index 00000000000..21f9a6572a9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158b +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. + +# --hints-- + +Your `#white-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); +``` + +Your `#white-hat` selector should have a `top` property set to `-140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); +``` + +Your `#white-hat` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md new file mode 100644 index 00000000000..2707ab677ae --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md @@ -0,0 +1,116 @@ +--- +id: 60b69a66b6ddb80858c5158c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Using an `id` selector, create a rule for your `black-mask` element. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `#black-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); +``` + +Your `#black-mask` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); +``` + +Your `#black-mask` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); +``` + +Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md new file mode 100644 index 00000000000..8c2d427cdb6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -0,0 +1,114 @@ +--- +id: 60b69a66b6ddb80858c5158d +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. + +# --hints-- + +Your `#black-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); +``` + +Your `#black-mask` selector should have a `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); +``` + +Your `#black-mask` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md new file mode 100644 index 00000000000..918cfcee918 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158e +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To ensure you can see the mask, give it a `z-index` of `1`. + +# --hints-- + +Your `#black-mask` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md new file mode 100644 index 00000000000..a472aa3b907 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md @@ -0,0 +1,126 @@ +--- +id: 60b69a66b6ddb80858c5158f +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Using an `id` selector, give your `gray-instrument` element a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`. + +# --hints-- + +You should have a `#gray-instrument` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); +``` + +Your `#gray-instrument` selector should have a `width` property set to `15%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); +``` + +Your `#gray-instrument` selector should have a `height` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); +``` + +Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md new file mode 100644 index 00000000000..7348596a0ac --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -0,0 +1,124 @@ +--- +id: 60b69a66b6ddb80858c51590 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. + +# --hints-- + +Your `#gray-instrument` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); +``` + +Your `#gray-instrument` selector should have a `top` value set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); +``` + +Your `#gray-instrument` selector should have a `left` value set to `125px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md new file mode 100644 index 00000000000..b94df3eb3fd --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md @@ -0,0 +1,115 @@ +--- +id: 60b69a66b6ddb80858c51591 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Set the `z-index` to `1`. + +# --hints-- + +Your `#gray-instrument` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md new file mode 100644 index 00000000000..445f4954806 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -0,0 +1,136 @@ +--- +id: 60b69a66b6ddb80858c51592 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Use a class selector to create a rule for the `black-dot` elements. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `.black-dot` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); +``` + +Your `.black-dot` selector should have a `width` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); +``` + +Your `.black-dot` selector should have a `height` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); +``` + +Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md new file mode 100644 index 00000000000..5da3409e73c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md @@ -0,0 +1,125 @@ +--- +id: 60b69a66b6ddb80858c51593 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. + +# --hints-- + +Your `.black-dot` selector should have a `border-radius` property set to `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md new file mode 100644 index 00000000000..06e43acd7fc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md @@ -0,0 +1,135 @@ +--- +id: 60b69a66b6ddb80858c51594 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. + +# --hints-- + +Your `.black-dot` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); +``` + +Your `.black-dot` selector should have a `margin` property set to `auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); +``` + +Your `.black-dot` selector should have a `margin-top` property set to `65%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md new file mode 100644 index 00000000000..7b766aa3f42 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -0,0 +1,146 @@ +--- +id: 60b69a66b6ddb80858c51595 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Use an id selector to style your `tan-table` element. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`. + +# --hints-- + +You should have a `#tan-table` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); +``` + +Your `#tan-table` selector should have a `width` property set to `450px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); +``` + +Your `#tan-table` selector should have a `height` property set to `140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); +``` + +Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. + +```js +assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + + --fcc-editable-region-- + + --fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md new file mode 100644 index 00000000000..f529c198260 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md @@ -0,0 +1,144 @@ +--- +id: 60b69a66b6ddb80858c51596 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. + +# --hints-- + +Your `#tan-table` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); +``` + +Your `#tan-table` selector should have a `top` property set to `275px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); +``` + +Your `#tan-table` selector should have a `left` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md new file mode 100644 index 00000000000..4452135e0e8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md @@ -0,0 +1,135 @@ +--- +id: 60b69a66b6ddb80858c51597 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Give the table a `z-index` of `1`. + +# --hints-- + +Your `#tan-table` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md new file mode 100644 index 00000000000..cc6008020de --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -0,0 +1,142 @@ +--- +id: 60b69a66b6ddb80858c51598 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`. + +# --hints-- + +You should add a new `div` element within the `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 2); +``` + +Your new `div` element should have the `id` set to `black-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md new file mode 100644 index 00000000000..64752da89e2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md @@ -0,0 +1,156 @@ +--- +id: 60b69a66b6ddb80858c51599 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Within your new `black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`. + +# --hints-- + +You should have three `div` elements within your `#black-character` element. + +```js +assert(document.querySelectorAll('#black-character > div')?.length === 3); +``` + +Your first new `div` element should have the `id` set to `black-hat`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); +``` + +Your second new `div` element should have the `id` set to `gray-mask`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); +``` + +Your third new `div` element should have the `id` set to `white-paper`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md new file mode 100644 index 00000000000..80566becc9f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -0,0 +1,158 @@ +--- +id: 60b69a66b6ddb80858c5159a +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The mask needs eyes. Within your `gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`. + +# --hints-- + +You should have two `div` elements within your `#gray-mask` element. + +```js +assert(document.querySelectorAll('#gray-mask > div')?.length === 2); +``` + +Your first new `div` element should have the `class` set to `eyes left`. + +```js +const first = document.querySelectorAll('#gray-mask > div')?.[0]; +assert(first?.classList?.contains('eyes')); +assert(first?.classList?.contains('left')); +``` + +Your second new `div` element should have the `class` set to `eyes right`. + +```js +const second = document.querySelectorAll('#gray-mask > div')?.[1]; +assert(second?.classList?.contains('eyes')); +assert(second?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md new file mode 100644 index 00000000000..c76ae468664 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md @@ -0,0 +1,161 @@ +--- +id: 60b69a66b6ddb80858c5159b +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Time to use some FontAwesome icons. + +The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome. + +Within your `white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`. + +This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon. + +# --hints-- + +You should have four new `i` elements within your `#white-paper` element. + +```js +assert(document.querySelectorAll('#white-paper > i')?.length === 4); +``` + +All of your `i` elements should have the `class` set to `fas fa-music`. + +```js +const icons = document.querySelectorAll('#white-paper > i'); +for (const icon of icons) { + assert(icon.classList?.contains('fas')); + assert(icon.classList?.contains('fa-music')); +}; +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md new file mode 100644 index 00000000000..1d94dce8114 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md @@ -0,0 +1,169 @@ +--- +id: 60b69a66b6ddb80858c5159c +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Use an `id` selector to create a rule for your `black-character` element. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should use a `#black-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')); +``` + +Your `#black-character` selector should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); +``` + +Your `#black-character` selector should have a `height` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); +``` + +Your `#black-character` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md new file mode 100644 index 00000000000..99fa42a9986 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -0,0 +1,167 @@ +--- +id: 60b69a66b6ddb80858c5159d +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`. + +# --hints-- + +Your `#black-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); +``` + +Your `#black-character` selector should have a `top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); +``` + +Your `#black-character` selector should have a `left` property set to `59%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md new file mode 100644 index 00000000000..fe0562636cd --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md @@ -0,0 +1,178 @@ +--- +id: 60b69a66b6ddb80858c5159e +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Use an `id` selector to create a rule for your `black-hat` element. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`. + +# --hints-- + +You should have a `#black-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); +``` + +Your `#black-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); +``` + +Your `#black-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); +``` + +Your `#black-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md new file mode 100644 index 00000000000..baae6b354f5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -0,0 +1,183 @@ +--- +id: 60b69a66b6ddb80858c5159f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Just like with your `white-hat`, you should style the border for the `black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`. + +# --hints-- + +Your `#black-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md new file mode 100644 index 00000000000..b9b8ef0ae6c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md @@ -0,0 +1,192 @@ +--- +id: 60b69a66b6ddb80858c515a1 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Using an `id` selector, style the `gray-mask` element. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`. + +# --hints-- + +You should have a `#gray-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); +``` + +Your `#gray-mask` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); +``` + +Your `#gray-mask` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') +``` + +Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md new file mode 100644 index 00000000000..a026481fefc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -0,0 +1,190 @@ +--- +id: 60b69a66b6ddb80858c515a2 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. + +# --hints-- + +Your `#gray-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); +``` + +Your `#gray-mask` selector should have a `top` property set to `-10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); +``` + +Your `#gray-mask` selector should have a `left` property set to `70px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md new file mode 100644 index 00000000000..7080b496309 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md @@ -0,0 +1,201 @@ +--- +id: 60b69a66b6ddb80858c515a3 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Using an `id` selector, create a rule for the `white-paper` element. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`. + +# --hints-- + +You should have a `#white-paper` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); +``` + +Your `#white-paper` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); +``` + +Your `#white-paper` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); +``` + +Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md new file mode 100644 index 00000000000..8acdfc0867b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -0,0 +1,199 @@ +--- +id: 60b69a66b6ddb80858c515a4 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. + +# --hints-- + +Your `#white-paper` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); +``` + +Your `#white-paper` selector should have a `top` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); +``` + +Your `#white-paper` selector should have a `left` property set to `-150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md new file mode 100644 index 00000000000..cd79b72769c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -0,0 +1,190 @@ +--- +id: 60b69a66b6ddb80858c515a5 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Set the `z-index` of the `white-paper` to `1`. + +# --hints-- + +Your `#white-paper` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md new file mode 100644 index 00000000000..b925595716c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md @@ -0,0 +1,211 @@ +--- +id: 60b69a66b6ddb80858c515a6 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a `class` selector to target your `fa-music` icons. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`. + +# --hints-- + +You should have a `.fa-music` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); +``` + +Your `.fa-music` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); +``` + +Your `.fa-music` selector should have a `margin-top` property set to `8%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); +``` + +Your `.fa-music` selector should have a `margin-left` property set to `13%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md new file mode 100644 index 00000000000..9de059269f0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md @@ -0,0 +1,217 @@ +--- +id: 60b69a66b6ddb80858c515a7 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Below your `black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`. + +# --hints-- + +You should have two new `div` elements within your `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 4); +``` + +Your two new `div` elements should have the `class` set to `blue`. + +```js +const divs = document.querySelectorAll('.characters > div'); +assert(divs?.[2]?.classList?.contains('blue')) +assert(divs?.[3]?.classList?.contains('blue')) +``` + +Your first new `div` should have an `id` of `blue-left`. + +```js +assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); +``` + +Your second new `div` should have an `id` of `blue-right`. + +```js +assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md new file mode 100644 index 00000000000..82c4e8d7f2a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -0,0 +1,207 @@ +--- +id: 60b69a66b6ddb80858c515a8 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`. + +# --hints-- + +You should have a `.blue` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Your `.blue` selector should have a `background-color` property set to `#1E90FF`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md new file mode 100644 index 00000000000..2628b7339b3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md @@ -0,0 +1,217 @@ +--- +id: 60b69a66b6ddb80858c515a9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`. + +# --hints-- + +You should have a `#blue-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); +``` + +Your `#blue-left` selector should have a `width` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); +``` + +Your `#blue-left` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md new file mode 100644 index 00000000000..ea6dc4a08b8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -0,0 +1,220 @@ +--- +id: 60b69a66b6ddb80858c515aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`. + +# --hints-- + +Your `#blue-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); +``` + +Your `#blue-left` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); +``` + +Your `#blue-left` selector should have a `left` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md new file mode 100644 index 00000000000..35843a734ef --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md @@ -0,0 +1,225 @@ +--- +id: 60b69a66b6ddb80858c515ab +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`. + +# --hints-- + +You should have a `#blue-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); +``` + +Your `#blue-right` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); +``` + +Your `#blue-right` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md new file mode 100644 index 00000000000..2ead91a28fe --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -0,0 +1,228 @@ +--- +id: 60b69a66b6ddb80858c515ac +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`. + +# --hints-- + +Your `#blue-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); +``` + +Your `#blue-right` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); +``` + +Your `#blue-right` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md new file mode 100644 index 00000000000..ac80b322cde --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -0,0 +1,225 @@ +--- +id: 60b69a66b6ddb80858c515ad +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Below your `blue` elements, add another `div`. Give it the `id` value of `orange-character`. + +# --hints-- + +You should have a new `div` element within your `characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 5); +``` + +Your new `div` element should have the `id` set to `orange-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md new file mode 100644 index 00000000000..bfd1d018cca --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md @@ -0,0 +1,245 @@ +--- +id: 60b69a66b6ddb80858c515ae +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Within that `orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order. + +# --hints-- + +You should have four new `div` elements within your `orange-character` element. + +```js +assert(document.querySelectorAll('#orange-character > div')?.length === 4); +``` + +Your first new `div` element should have an `id` set to `black-round-hat`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); +``` + +Your second new `div` element should have an `id` set to `eyes-div`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); +``` + +Your third new `div` element should have an `id` set to `triangles`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); +``` + +Your fourth new `div` element should have an `id` set to `guitar`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md new file mode 100644 index 00000000000..48c6238c1c2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -0,0 +1,240 @@ +--- +id: 60b69a66b6ddb80858c515af +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +The `eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`. + +# --hints-- + +You should have two `div` elements nested in your `eyes-div`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.length === 2); +``` + +The first new `div` should have the `class` set to `eyes left`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); +``` + +The second new `div` should have the `class` set to `eyes right`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md new file mode 100644 index 00000000000..366d18b2481 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md @@ -0,0 +1,238 @@ +--- +id: 60b69a66b6ddb80858c515b0 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Within the `triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`. + +# --hints-- + +You should have 30 `div` elements within your `triangles` element. + +```js +assert(document.querySelectorAll('#triangles > div')?.length === 30); +``` + +All 30 of your new `div` elements should have the `class` set to `triangle`. + +```js +const divDivDiv = document.querySelectorAll('#triangles > div'); +for (const div of divDivDiv) { + assert(div?.classList?.contains('triangle')); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md new file mode 100644 index 00000000000..38130fa44a2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -0,0 +1,298 @@ +--- +id: 60b69a66b6ddb80858c515b1 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Within the `guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`. + +The third `div` should not have the `guitar` class. + +# --hints-- + +You should have three new `div` elements within your `guitar` element. + +```js +assert(document.querySelectorAll('#guitar > div')?.length === 3); +``` + +Your first new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); +``` + +Your first new `div` should have an `id` set to `guitar-left`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); +``` + +Your second new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); +``` + +Your second new `div` should have an `id` set to `guitar-right`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); +``` + +Your third new `div` should have an `id` set to `guitar-neck`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); +``` + +You should not give the third new `div` a `class` of `guitar`. + +```js +assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md new file mode 100644 index 00000000000..38be428b773 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md @@ -0,0 +1,281 @@ +--- +id: 60b69a66b6ddb80858c515b2 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Use another FontAwesome icon for your `guitar`. Inside both the `guitar-left` and `guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`. + +# --hints-- + +Within your `guitar-left` element, you should add an `i` element. + +```js +assert(document.querySelectorAll('#guitar-left > i')?.length === 1); +``` + +Within your `guitar-right` element, you should add an `i` element. + +```js +assert(document.querySelectorAll('#guitar-right > i')?.length === 1); +``` + +Your two new `i` elements should have the `class` set to `fas fa-bars`. + +```js +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ +
+
+ +
+ --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md new file mode 100644 index 00000000000..0b3025790e8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md @@ -0,0 +1,287 @@ +--- +id: 60b69a66b6ddb80858c515b3 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Select your `orange-character` element with an `id` selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`. + +# --hints-- + +You should have an `#orange-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); +``` + +Your `#orange-character` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); +``` + +Your `#orange-character` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); +``` + +Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md new file mode 100644 index 00000000000..754861f47d0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -0,0 +1,285 @@ +--- +id: 60b69a66b6ddb80858c515b4 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. + +# --hints-- + +Your `#orange-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); +``` + +Your `#orange-character` selector should have a `top` property set to `25%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); +``` + +Your `#orange-character` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md new file mode 100644 index 00000000000..d76fca6b4c8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md @@ -0,0 +1,296 @@ +--- +id: 60b69a66b6ddb80858c515b5 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Style your `black-round-hat` element with an `id` selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `#black-round-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); +``` + +Your `#black-round-hat` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); +``` + +Your `#black-round-hat` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); +``` + +Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md new file mode 100644 index 00000000000..d8e580eebc1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -0,0 +1,282 @@ +--- +id: 60b69a66b6ddb80858c515b6 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this. + +# --hints-- + +Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md new file mode 100644 index 00000000000..5f43f757585 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515b7 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`. + +# --hints-- + +Your `#black-round-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); +``` + +Your `#black-round-hat` selector should have a `top` property set to `-100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); +``` + +Your `#black-round-hat` selector should have a `left` property set to `5px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md new file mode 100644 index 00000000000..630dfa5633b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md @@ -0,0 +1,286 @@ +--- +id: 60b69a66b6ddb80858c515b8 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Put the `black-round-hat` on the correct layer with a `z-index` of `-1`. + +# --hints-- + +Your `#black-round-hat` selector should have a `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md new file mode 100644 index 00000000000..20de7ca5e51 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -0,0 +1,301 @@ +--- +id: 60b69a66b6ddb80858c515b9 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Use an `id` selector to create a rule for your `eyes-div` element. Set the `width` to `180px` and the `height` to `50px`. + +# --hints-- + +You should create an `#eyes-div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); +``` + +Your `#eyes-div` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); +``` + +Your `#eyes-div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md new file mode 100644 index 00000000000..02bc007d6c9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -0,0 +1,304 @@ +--- +id: 60b69a66b6ddb80858c515ba +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. + +# --hints-- + +Your `#eyes-div` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); +``` + +Your `#eyes-div` selector should have a `top` property set to `-40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); +``` + +Your `#eyes-div` selector should have a `left` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md new file mode 100644 index 00000000000..c9d3d036cd7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515bc +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Give the `eyes-div` a `z-index` of `3`. + +# --hints-- + +Your `#eyes-div` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md new file mode 100644 index 00000000000..15522104562 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md @@ -0,0 +1,348 @@ +--- +id: 60b69a66b6ddb80858c515bd +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Now use a `class` selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`. + +# --hints-- + +You should create a `.guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')); +``` + +Your `.guitar` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); +``` + +Your `.guitar` selector should have a `height` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); +``` + +Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); +``` + +Your `.guitar` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md new file mode 100644 index 00000000000..96cea01cca3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -0,0 +1,337 @@ +--- +id: 60b69a66b6ddb80858c515be +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. + +# --hints-- + +You should create a new `#guitar-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); +``` + +Your `#guitar-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md new file mode 100644 index 00000000000..92fde860227 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -0,0 +1,348 @@ +--- +id: 60b69a66b6ddb80858c515bf +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`. + +# --hints-- + +You should create a new `#guitar-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); +``` + +Your `#guitar-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); +``` + +Your `#guitar-right` selector should have a `left` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md new file mode 100644 index 00000000000..61d8eb4eb0d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -0,0 +1,359 @@ +--- +id: 60b69a66b6ddb80858c515c0 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Now you need to move the bar icons into place. Create a `class` selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`. + +# --hints-- + +You should create a `.fa-bars` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); +``` + +Your `.fa-bars` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); +``` + +Your `.fa-bars` selector should have a `margin-top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); +``` + +Your `.fa-bars` selector should have a `margin-left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md new file mode 100644 index 00000000000..9aeb95ac779 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -0,0 +1,365 @@ +--- +id: 60b69a66b6ddb80858c515c1 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Use an `id` selector to create a `guitar-neck` rule. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`. + +# --hints-- + +You should create a `#guitar-neck` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); +``` + +Your `#guitar-neck` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); +``` + +Your `#guitar-neck` selector should have a `height` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); +``` + +Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md new file mode 100644 index 00000000000..6839773d378 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md @@ -0,0 +1,363 @@ +--- +id: 60b69a66b6ddb80858c515c2 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. + +# --hints-- + +Your `#guitar-neck` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); +``` + +Your `#guitar-neck` selector should have a `top` property set to `45px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); +``` + +Your `#guitar-neck` selector should have a `left` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md new file mode 100644 index 00000000000..315b4c5409f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -0,0 +1,354 @@ +--- +id: 60b69a66b6ddb80858c515c3 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Give the `guitar-neck` a `z-index` of `3`. + +# --hints-- + +Your `#guitar-neck` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md new file mode 100644 index 00000000000..78eed6b9887 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md @@ -0,0 +1,381 @@ +--- +id: 60b69a66b6ddb80858c515c4 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Time to style your `eyes` elements. Use a `class` selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`. + +# --hints-- + +You should create a `.eyes` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')); +``` + +Your `.eyes` selector should have a `width` property set to `35px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); +``` + +Your `.eyes` selector should have a `height` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); +``` + +Your `.eyes` selector should have a `background-color` property set to `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md new file mode 100644 index 00000000000..ece6f1c39be --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md @@ -0,0 +1,382 @@ +--- +id: 60b69a66b6ddb80858c515c5 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. + +# --hints-- + +You should create a `.right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')); +``` + +Your `.right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); +``` + +Your `.right` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); +``` + +Your `.right` selector should have a `right` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md new file mode 100644 index 00000000000..58e504b96e2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -0,0 +1,388 @@ +--- +id: 60b69a66b6ddb80858c515c6 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. + +# --hints-- + +You should create a new `.left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')); +``` + +Your `.left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); +``` + +Your `.left` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); +``` + +Your `.left` selector should have a `left` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { +width: 150px; +height: 120px; +background-color: Goldenrod; +border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md new file mode 100644 index 00000000000..a554e05e588 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md @@ -0,0 +1,739 @@ +--- +id: 60b69a66b6ddb80858c515c7 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +One last step. The FontAwesome icons are a little too small. Target all of them with a `class` selector for `fas`, and set the `font-size` to `30px`. + +With that, your Picasso painting is complete! + +# --hints-- + +You should create a `.fas` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')); +``` + +Your `.fas` selector should have a `font-size` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +.left { + position: absolute; + top: 15px; + left: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +.left { + position: absolute; + top: 15px; + left: 30px; +} + +.fas { + font-size: 30px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md new file mode 100644 index 00000000000..d7bffee9186 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md @@ -0,0 +1,71 @@ +--- +id: 60b80da8676fb3227967a731 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Go ahead and link your CSS file now, even though you have not written any CSS yet. + +Add a `link` element with a `rel` of `stylesheet` and an `href` of `styles.css`. + +# --hints-- + + +Your code should have a `link` element. + +```js +assert.match(code, / link')); +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +const link_element = document.querySelector('link'); +const rel = link_element.getAttribute("rel"); +assert.equal(rel, "stylesheet"); +``` + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +const link = document.querySelector('link'); +assert.equal(link.dataset.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md new file mode 100644 index 00000000000..bb1fc951b69 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md @@ -0,0 +1,312 @@ +--- +id: 60ba890832b4940f24d1936b +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Adjust the layout of the `triangle` elements with a `display` of `inline-block`. + +# --hints-- + +Your `.triangle` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md new file mode 100644 index 00000000000..e649ce5154c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -0,0 +1,326 @@ +--- +id: 60ba89123a445e0f5c9e4022 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Give your `triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`. + +# --hints-- + +Your `.triangle` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-right-color` property set to `Gold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md new file mode 100644 index 00000000000..4351170e03d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md @@ -0,0 +1,312 @@ +--- +id: 60ba8913f1704c0f7a8906b8 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`. + +# --hints-- + +Your `.triangle` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); +``` + +Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md new file mode 100644 index 00000000000..ac4d90d5a9a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -0,0 +1,315 @@ +--- +id: 60ba89146b25080f99ab54ad +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`. + +# --hints-- + +You should create a `.triangle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')); +``` + +Your `.triangle` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); +``` + +Your `.triangle` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md new file mode 100644 index 00000000000..24839e38369 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -0,0 +1,310 @@ +--- +id: 60ba8914bab51f0fb8228e9c +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`. + +# --hints-- + +You should add a `#triangles` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')); +``` + +Your `#triangles` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); +``` + +Your `#triangles` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md new file mode 100644 index 00000000000..a14fdbe188a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md @@ -0,0 +1,327 @@ +--- +id: 60ba929345ab0714a3743655 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. + +# --hints-- + +You should create a `#guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')); +``` + +Your `#guitar` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); +``` + +Your `#guitar` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md new file mode 100644 index 00000000000..a7e3a17efde --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -0,0 +1,330 @@ +--- +id: 60ba9296d4d6b414c1b10995 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`. + +# --hints-- + +Your `#guitar` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); +``` + +Your `#guitar` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); +``` + +Your `#guitar` selector should have a `left` property set to `0px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md new file mode 100644 index 00000000000..b7aca7ee5db --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -0,0 +1,321 @@ +--- +id: 60ba92987c1e4914dfa7a0b9 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Give the `#guitar` rule a `z-index` of `3`. + +# --hints-- + +Your `#guitar` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md new file mode 100644 index 00000000000..87b39919189 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md @@ -0,0 +1,164 @@ +--- +id: 60bad32219ebcb4a8810ac6a +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Set the `border-width` of the `black-hat` to `150px 0 0 300px`. + +# --hints-- + +Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md new file mode 100644 index 00000000000..8c2374e0a55 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md @@ -0,0 +1,154 @@ +--- +id: 612ec19d5268da7074941f84 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Logical operators can be used to construct more complex media queries. The `and` logical operator is used to query two media conditions. + +For example, a media query that targets a display width between 500px and 1000px would be: + +```css +@media (min-width: 500px) and (max-width: 1000px){ + +} +``` + +Add another `@media` rule to apply if the browser window is wider than `769px` but smaller than `1199px`. + +# --hints-- + +You should add a new `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); +``` + +Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`. + +```js +const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText; +assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; + overflow: hidden; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 358px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md new file mode 100644 index 00000000000..f6733afed95 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad6996b +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko Painting`. + +Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. +# --hints-- + +Your code should have a `meta` tag. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +The `meta` tag should set the `charset` to `UTF-8`. + +```js +assert(document.querySelector('meta').getAttribute('charset')?.toLowerCase() === 'utf-8'); +``` + +Your code should have a `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +The `title` should be `Rothko Painting`. + +```js +assert(document.querySelector('title').innerText === 'Rothko Painting'); +``` + +Your code should have an `img` element. + +```js +assert(document.querySelectorAll('img').length === 1); +``` + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md new file mode 100644 index 00000000000..45b81206b35 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md @@ -0,0 +1,42 @@ +--- +id: 60a3e3396c7b40068ad6996c +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the CSS box model, every HTML element is treated as a box with four areas. + +Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element. + +Change the `src` attribute in the `` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md new file mode 100644 index 00000000000..765122fc40d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md @@ -0,0 +1,41 @@ +--- +id: 60a3e3396c7b40068ad6996d +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it. + +Think of the border like the cardboard box your item was shipped in. + +Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md new file mode 100644 index 00000000000..df9f52fe8a4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md @@ -0,0 +1,43 @@ +--- +id: 60a3e3396c7b40068ad6996e +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Margin is the area outside of the box, and can be used to control the space between other boxes or elements. + +Here the bottom element has a larger top margin, pushing it further down the page. + +Now that you understand the CSS box model, let's get started on the Rothko painting. + +Remove the `` element. + +# --hints-- + +You should not have an `img` element in your code. + +```js +assert(document.querySelector('img') === null); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md new file mode 100644 index 00000000000..d5c739abeac --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md @@ -0,0 +1,47 @@ +--- +id: 60a3e3396c7b40068ad6996f +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Add a `div` element in the `body`. + +Set the `class` attribute equal to `canvas`. For example, `
`. + +This will act as the canvas for your painting. + +# --hints-- + +Your code should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1) +``` + +The `div` element should have a `class` with the value `canvas`. + +```js +assert(document.querySelector('div').className.split(' ').includes('canvas')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko Painting + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md new file mode 100644 index 00000000000..2dbdf0b6403 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md @@ -0,0 +1,53 @@ +--- +id: 60a3e3396c7b40068ad69970 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Before you can start styling the `div` you added, you need to link your CSS to your HTML. + +Add a `link` element to link your `styles.css` file. Set the `href` to `./styles.css`, and remember to set the `rel` attribute to `stylesheet`. + +# --hints-- + +Your code should have a `link` element. + +```js +assert(/ + + + + Rothko Painting +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md new file mode 100644 index 00000000000..5692e34e757 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md @@ -0,0 +1,69 @@ +--- +id: 60a3e3396c7b40068ad69971 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Time for CSS. + +Even though your `
` has no text, it's still treated as a box with content. +Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. +Here's a CSS rule that sets the width of the class `card` to 300 pixels: + +```css +.card { + width: 300px; +} +``` + +# --hints-- + +Your code should have a `.canvas` selector. + +```js +const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); +assert(hasCanvas) +``` + +You should set the `width` property to `500px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') +assert(hasWidth); +``` + +Your `.canvas` element should have a `width` of `500px`. + +```js +const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); +assert(width === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md new file mode 100644 index 00000000000..65f77ecc018 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md @@ -0,0 +1,54 @@ +--- +id: 60a3e3396c7b40068ad69972 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Add the `height` property with the value `600px` to your `.canvas` rule. + +# --hints-- + +You should set the `height` property to `600px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); +assert(hasHeight); +``` + +Your `.canvas` element should have a `height` of `600px`. + +```js +const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); +assert(canvasHeight === '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md new file mode 100644 index 00000000000..6e38ea0aace --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md @@ -0,0 +1,55 @@ +--- +id: 60a3e3396c7b40068ad69973 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Change the `background-color` of the canvas to `#4d0f00`. + +# --hints-- + +You should set the `background-color` property to `#4d0f00`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)'); +assert(hasBackground); +``` + +Your `.canvas` element should have a `background-color` of `#4d0f00`. + +```js +const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color'); +assert(canvasBackground === 'rgb(77, 15, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md new file mode 100644 index 00000000000..2af09ce1ff8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69974 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Every painting needs a frame. + +Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. +# --hints-- + +You should add a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2) +``` + +Your `.canvas` element should be nested in the new `div` element. + +```js +assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); +``` + +Your new `div` should have a `class` with the value `frame`. + +```js +assert(document.querySelector('div').className.split(' ').includes('frame')); +``` + +Your new `div` should be within your `body` element. + +```js +assert(document.querySelector('div').parentElement.tagName === 'BODY'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +``` + +```html + + + + + Rothko Painting + + + +--fcc-editable-region-- + +
+
+ +--fcc-editable-region-- + + ``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md new file mode 100644 index 00000000000..351e6bf526e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69975 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Write a new rule using the `.frame` class selector. + +Use the `border` shorthand declaration to give the `.frame` element a solid, black border with a width of `50px`. + +# --hints-- + +Your code should have a `.frame` selector. + +```js +const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame'); +assert(hasFrame); +``` + +You should set the `border` property to `50px solid black`. + +```js +const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black'); +assert(hasBorder); +``` + +Your `.frame` element should have a `50px solid black` `border`. + +```js +const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border'); +assert(frameBorder === '50px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md new file mode 100644 index 00000000000..a66a09fe26b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md @@ -0,0 +1,64 @@ +--- +id: 60a3e3396c7b40068ad69976 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +The frame is much too wide. + +In `.frame`, set its `width` to 500 pixels. + +# --hints-- + +You should set the `width` property to `500px`. + +```js +const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px'); +assert(widthFilter.length === 2); +``` + +Your `.frame` element should have a `width` of `500px`. + +```js +const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width'); +assert(frameWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md new file mode 100644 index 00000000000..fffa032b224 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad69977 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Use padding to adjust the spacing within an element. + +In `.frame`, use the `padding` shorthand property to increase the space between the `.frame` and `.canvas` elements by `50px`. The shorthand will increase space in the top, bottom, left, and right of the element's border and canvas within. + +# --hints-- + +You should set the `padding` property to `50px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); +assert(hasPadding); +``` + +Your `.frame` element should have a `padding` value of `50px`. + +```js +const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); +assert(framePadding === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md new file mode 100644 index 00000000000..34a33d9846d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md @@ -0,0 +1,66 @@ +--- +id: 60a3e3396c7b40068ad69978 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Use margins to adjust the spacing outside of an element. + +Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto'); +assert(hasMargin); +``` + +Your `.frame` element should have a `margin` value of `20px auto`. + +```js +const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin'); +assert(frameMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md new file mode 100644 index 00000000000..74560ee0541 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad69979 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add a new `div` element inside of your `.canvas` element. + +Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +You should nest the new `div` element within your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[0].tagName === 'DIV'); +``` + +Your new `div` should have a `class` attribute with a value `one`. + +```js +assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md new file mode 100644 index 00000000000..6490cbccbe0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997a +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Write a new rule that targets `.one` and set its `width` to 425 pixels. + +# --hints-- + +You should have a `.one` selector. + +```js +const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); +assert(hasOne); +``` + +You should set the `width` property to `425px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); +assert(hasWidth); +``` + +Your `.one` element should have a `width` value of `425px`. + +```js +const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); +assert(oneWidth === '425px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md new file mode 100644 index 00000000000..4478884a82d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md @@ -0,0 +1,70 @@ +--- +id: 60a3e3396c7b40068ad6997b +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Now set the `height` for `.one` to 150 pixels. + +# --hints-- + +You should set the `height` property to `150px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px'); +assert(hasHeight); +``` + +Your `.one` element should have a `height` value of `150px`. + +```js +const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height'); +assert(oneHeight === '150px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md new file mode 100644 index 00000000000..bd9e89c942f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad6997c +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Set the `background-color` of `.one` to `#efb762`. + +# --hints-- + +You should set the `background-color` property to `#efb762`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); +assert(hasBackground) +``` + +Your `.one` element should have a `background-color` value of `#efb762`. + +```js +const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); +assert(oneBackground === 'rgb(239, 183, 98)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md new file mode 100644 index 00000000000..11b91323bec --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997d +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Use margins to position the `.one` element on the canvas. + +Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto'); +assert(marginFilter.length === 2); +``` + +Your `.one` element should have a `margin` value of `20px auto`. + +```js +const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin'); +assert(oneMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md new file mode 100644 index 00000000000..902607455a2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md @@ -0,0 +1,75 @@ +--- +id: 60a3e3396c7b40068ad6997e +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. + +Add `padding` of `1px` to the `.canvas` element to give the `.one` element something solid to push off of. + +# --hints-- + +You should set the `padding` property to `1px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px'); +assert(hasPadding); +``` + +Your `.canvas` element should have a `padding` value of `1px`. + +```js +const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding'); +assert(canvasPadding === '1px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md new file mode 100644 index 00000000000..05297dd3a73 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md @@ -0,0 +1,82 @@ +--- +id: 60a3e3396c7b40068ad6997f +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. + +Replace the `padding` property with `overflow` set to `hidden` - changing the canvas back to its original dimensions. + +# --hints-- + +You should remove the `padding` property from the `.canvas` selector. + +```js +const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding'); +assert(!canvasPadding); +``` + +You should set the `overflow` property to `hidden`. + +```js +const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); +assert(hasOverflow); +``` + +Your `.canvas` element should have an `overflow` value of `hidden`. + +```js +const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); +assert(canvasOverflow === 'hidden') +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + padding: 1px; +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md new file mode 100644 index 00000000000..94455c3665d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69980 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle. + +# --hints-- + +You should not change the existing `.one` element. + +```js +assert(document.querySelectorAll('.one').length === 1); +``` + +You should have a second `div` element in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[1].tagName === 'DIV'); +``` + +Your second `div` element should have a `class` value of `two`. + +```js +assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two')); +``` + +Your `.two` element should come after your `.one` element. + +```js +assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md new file mode 100644 index 00000000000..da0bd2e49db --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69981 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels. + +# --hints-- + +You should have a `.two` selector. + +```js +const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); +assert(hasTwo); +``` + +You should set the `width` property to `475px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); +assert(hasWidth); +``` + +Your `.two` element should have a `width` value of `475px`. + +```js +const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); +assert(twoWidth === '475px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md new file mode 100644 index 00000000000..6a7eb6c6d08 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md @@ -0,0 +1,79 @@ +--- +id: 60a3e3396c7b40068ad69982 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Set the `height` of the `.two` element to 200 pixels. + +# --hints-- + +You should set the `height` property to `200px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); +assert(hasHeight); +``` + +Your `.two` element should have a `height` value of `200px`. + +```js +const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); +assert(twoHeight === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md new file mode 100644 index 00000000000..19608f2692a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md @@ -0,0 +1,80 @@ +--- +id: 60a3e3396c7b40068ad69983 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set the `background-color` of the `.two` element to `#8f0401`. + +# --hints-- + +You should set the `background-color` property to `#8f0401`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); +assert(hasBackground); +``` + +Your `.two` element should have a `background-color` value of `#8f0401`. + +```js +const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); +assert(twoBackground === 'rgb(143, 4, 1)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md new file mode 100644 index 00000000000..2def25b262f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md @@ -0,0 +1,81 @@ +--- +id: 60a3e3396c7b40068ad69984 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Center the `.two` element by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `auto`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md new file mode 100644 index 00000000000..5994749bd4f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad69986 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. + +# --hints-- + +Your existing `.one` and `.two` elements should not be changed. + +```js +assert(document.querySelectorAll('.one').length === 1); +assert(document.querySelectorAll('.two').length === 1); +``` + +Your new `div` should be nested in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); +``` + +Your new `div` should come after your `.two` element. + +```js +assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); +``` + +Your new `div` element should have a `class` with the value `three`. + +```js +assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md new file mode 100644 index 00000000000..1376ec85ccf --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md @@ -0,0 +1,94 @@ +--- +id: 60a3e3396c7b40068ad69987 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +You don't always have to use pixels when sizing an element. + +Create a new rule, `.three`, and set its `width` to `91%`. + +# --hints-- + +You should use the `.three` selector. + +```js +const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); +assert(hasThree); +``` + +You should set the `width` property to `91%`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); +assert(hasWidth); +``` + +Your `.three` element should have a `width` value of `91%`. + +```js +const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); +assert(threeWidth === '91%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md new file mode 100644 index 00000000000..c1a860a8182 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md @@ -0,0 +1,87 @@ +--- +id: 60a3e3396c7b40068ad69988 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Set the `height` of `.three` to `28%`. + +# --hints-- + +You should set the `height` property to `28%`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); +assert(hasHeight); +``` + +Your `.three` element should have a `height` value of `28%`. + +```js +const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); +assert(threeHeight === '28%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md new file mode 100644 index 00000000000..b5a40dfd37c --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md @@ -0,0 +1,88 @@ +--- +id: 60a3e3396c7b40068ad69989 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Change the `background-color` of `.three` to `#b20403`. + +# --hints-- + +You should set the `background-color` property to `#b20403`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); +assert(hasBackground); +``` + +Your `.three` element should have a `background-color` value of `#b20403`. + +```js +const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); +assert(threeBackground === 'rgb(178, 4, 3)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md new file mode 100644 index 00000000000..3ed4e87a89a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md @@ -0,0 +1,89 @@ +--- +id: 60a3e3396c7b40068ad6998a +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Center the `.three` element on the canvas by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); +assert(marginFilter.length === 2); +``` + +Your `.three` element should have a `margin` value of `auto`. + +```js +const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); +assert(threeMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md new file mode 100644 index 00000000000..e16dc6aa513 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad6998b +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +It's helpful to have your margins push in one direction. + +In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. + +In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels. + +# --hints-- + +You should set the `margin` property to `0 auto 20px`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `0 auto 20px`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === '0px auto 20px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + margin: auto; +--fcc-editable-region-- +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md new file mode 100644 index 00000000000..fac990dcb91 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md @@ -0,0 +1,100 @@ +--- +id: 60a3e3396c7b40068ad6998c +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +The colors and shapes of your painting are too sharp to pass as a Rothko. + +Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element. + +Here's an example of a rule that add a 3px `blur`: + +```css +p { + filter: blur(3px); +} +``` + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); +assert(hasFilter); +``` + +Your `.canvas` element should have a `filter` value of `blur(2px)`. + +```js +const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); +assert(canvasFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md new file mode 100644 index 00000000000..6ac741a3989 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md @@ -0,0 +1,108 @@ +--- +id: 60a3e3396c7b40068ad6998d +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. + +# --hints-- + +You should have a `.one, .two` selector list. + +```js +const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); +assert(oneTwo); +``` + +You should set the `filter` property to `blur(1px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); +assert(hasFilter) +``` + +Your `.one` element should have a `filter` value of `blur(1px)`. + +```js +const one = document.querySelector('.one'); +const oneFilter = getComputedStyle(one).filter; +assert(oneFilter === 'blur(1px)'); +``` + +Your `.two` element should have a `filter` value of `blur(1px)`. + +```js +const two = document.querySelector('.two'); +const twoFilter = getComputedStyle(two).filter; +assert(twoFilter === 'blur(1px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md new file mode 100644 index 00000000000..504855f1620 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md @@ -0,0 +1,95 @@ +--- +id: 60a3e3396c7b40068ad6998e +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Increase the `blur` of `.three` by 2 pixels. + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); +assert(filterFilter.length === 2); +``` + +Your `.three` element should have a `filter` value of `blur(2px)`. + +```js +const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); +assert(threeFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md new file mode 100644 index 00000000000..251253face2 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad6998f +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The rectangles are too small and their edges don't have the soft quality of a painting. + +Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #efb762`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. + +```js +const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); +assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md new file mode 100644 index 00000000000..8ecac547a24 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md @@ -0,0 +1,97 @@ +--- +id: 60a3e3396c7b40068ad69990 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. + +```js +const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); +assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md new file mode 100644 index 00000000000..a0e9e6ae11b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad69991 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 5px 5px #b20403`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +assert(hasBoxShadow); +``` + +Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. + +```js +const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); +assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md new file mode 100644 index 00000000000..f26f0c94b90 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md @@ -0,0 +1,101 @@ +--- +id: 60a3e3396c7b40068ad69992 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The corners of each rectangle are still too sharp. + +Round each corner of the `.one` element by 9 pixels, using the `border-radius` property. + +# --hints-- + +You should set the `border-radius` property to `9px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); +assert(hasBorderRadius); +``` + +Your `.one` element should have a `border-radius` value of `9px`. + +```js +const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); +assert(oneBorderRadius === '9px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md new file mode 100644 index 00000000000..e3effb601d3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md @@ -0,0 +1,100 @@ +--- +id: 60a3e3396c7b40068ad69993 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`. + +# --hints-- + +You should set the `border-radius` property to `8px 10px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); +assert(hasBorderRadius); +``` + +Your `.two` element should have a `border-radius` value of `8px 10px`. + +```js +const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); +assert(twoBorderRadius === '8px 10px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md new file mode 100644 index 00000000000..6656f427a1b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69994 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners. + +Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. + +# --hints-- + +You should set the `border-radius` property to `30px 25px 60px 12px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); +assert(hasBorderRadius); +``` + +Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. + +```js +const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); +assert(threeBorderRadius === '30px 25px 60px 12px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md new file mode 100644 index 00000000000..14e9bd84d52 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md @@ -0,0 +1,104 @@ +--- +id: 60a3e3396c7b40068ad69995 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Rotate each rectangle to give them more of an imperfect, hand-painted look. + +Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees. + +# --hints-- + +You should set the `transform` property to `rotate(-0.6deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); +assert(hasTransform); +``` + +Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. + +```js +const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); +assert(oneTransform === 'rotate(-0.6deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md new file mode 100644 index 00000000000..ed50b6b0893 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69996 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Rotate the `.two` element clockwise by 0.4 degrees. + +# --hints-- + +You should set the `transform` property to `rotate(0.4deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); +assert(hasTransform); +``` + +Your `.two` element should have a `transform` value of `rotate(0.4deg)`. + +```js +const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); +assert(twoTransform === 'rotate(0.4deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md new file mode 100644 index 00000000000..9bce8c93963 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md @@ -0,0 +1,180 @@ +--- +id: 60a3e3396c7b40068ad69997 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Rotate `.three` counter clockwise by 0.2 degrees. + +With this final step, your Rothko painting is now complete. + +# --hints-- + +You should set the `transform` property to `rotate(-0.2deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)'); +assert(hasTransform); +``` + +Your `.three` element should have a `transform` value of `rotate(-0.2deg)`. + +```js +const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform'); +assert(threeTransform === 'rotate(-0.2deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` + +## --solutions-- + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; + transform: rotate(-0.2deg); +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md new file mode 100644 index 00000000000..4526afe38b1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md @@ -0,0 +1,55 @@ +--- +id: 615f2abbe7d18d49a1e0e1c8 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +We've provided a basic HTML boilerplate for you. + +Create an `h1` element within your `body` element and give it the text `Nutrition Facts`. + +# --hints-- + +You should add a new `h1` element. + +```js +assert.exists(document.querySelector('h1')); +``` + +Your `h1` element should be within your `body` element. + +```js +assert(document.querySelector('h1')?.parentElement?.localName === 'body'); +``` + +Your `h1` element should have the text `Nutrition Facts`. + +```js +assert(document.querySelector('h1')?.innerText === 'Nutrition Facts'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md new file mode 100644 index 00000000000..11b8188cc98 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -0,0 +1,60 @@ +--- +id: 615f2d4150fe0d4cbd0f2628 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Below your `h1` element, add a `p` element with the text `8 servings per container`. + +# --hints-- + +You should add a new `p` element. + +```js +assert.exists(document.querySelector('p')); +``` + +Your `p` element should be within your `body` element. + +```js +assert(document.querySelector('p')?.parentElement?.localName === 'body'); +``` + +Your `p` element should come after your `h1` element. + +```js +assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); +``` + +Your `p` element should have the text `8 servings per container`. + +```js +assert(document.querySelector('p')?.innerText === '8 servings per container'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + +

Nutrition Facts

+ + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md new file mode 100644 index 00000000000..94213e09246 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md @@ -0,0 +1,61 @@ +--- +id: 615f34948891834dd77655a6 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Add a second `p` element with the text `Serving size 2/3 cup (55g)`. + +# --hints-- + +You should have a second `p` element. + +```js +assert(document.querySelectorAll('p')?.length === 2); +``` + +Your second `p` element should be within your `body` element. + +```js +assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body'); +``` + +Your second `p` element should come after your existing `p` element. + +```js +assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p'); +``` + +Your second `p` element should have the text `Serving size 2/3 cup (55g)`. + +```js +assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + +

Nutrition Facts

+

8 servings per container

+ + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md new file mode 100644 index 00000000000..76f425c598b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md @@ -0,0 +1,68 @@ +--- +id: 615f34ecc1091b4fd5a8a484 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`. + +This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`. + +Also add a `link` element to link your `styles.css` file. + +# --hints-- + +Your code should have two self-closing `link` elements. + +```js +assert(document.querySelectorAll('link').length === 2); +``` + +Both of your `link` elements should have the `rel` attribute set to `stylesheet`. + +```js +const links = [...document.querySelectorAll('link')]; +assert(links.every(link => link.getAttribute('rel') === 'stylesheet')); +``` + +One of your `link` elements should have an `href` attribute set to `./styles.css`. + +```js +assert(code.match(/ link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800')); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + Nutrition Label + + + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md new file mode 100644 index 00000000000..ad1b189bed0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md @@ -0,0 +1,53 @@ +--- +id: 615f357957e370510f21ea16 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Create a `body` selector and give it a `font-family` set to `Open Sans` with a fallback of `sans-serif`. + +Remember that fonts with spaces in the name must be wrapped in quotes for CSS. + +# --hints-- + +You should have a `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` selector should have a `font-family` property set to `"Open Sans", sans-serif`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md new file mode 100644 index 00000000000..52a336e0522 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md @@ -0,0 +1,55 @@ +--- +id: 615f378014c2da526a109c81 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +The font is a bit small. Create an `html` selector and set the font to have a size of `16px`. + +# --hints-- + +You should have an `html` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Your `html` selector should have a `font-size` property set to `16px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + font-family: 'Open Sans', sans-serif; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md new file mode 100644 index 00000000000..96e33cc1a34 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md @@ -0,0 +1,64 @@ +--- +id: 615f38279e5c3d53692ea441 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Wrap your `h1` and `p` elements in a `div` element. Give that `div` a `class` attribute set to `label`. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelector('div')); +``` + +Your new `div` element should have the `class` attribute set to `label`. + +```js +assert(document.querySelector('div')?.classList?.contains('label')); +``` + +Your `h1` and `p` elements should be within your new `.label` element. + +```js +const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')]; +assert(children?.every(child => child?.parentElement?.classList?.contains('label'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + +--fcc-editable-region-- + +

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+ +--fcc-editable-region-- + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md new file mode 100644 index 00000000000..13f5f2593b8 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md @@ -0,0 +1,63 @@ +--- +id: 615f38cabc64e3556f98cc1a +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Borders can be used to group and prioritize content. + +Create a `.label` selector and give it a `border` set to `2px solid black`. + +# --hints-- + +You should have a `.label` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')); +``` + +Your `.label` selector should have a `border` property set to `2px solid black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md new file mode 100644 index 00000000000..9f08de011e6 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md @@ -0,0 +1,59 @@ +--- +id: 615f3949f58e12577dcefb00 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Good use of white space can bring focus to the important elements of your page, and help guide your user's eyes through your text. + +Give your `.label` selector a `width` property set to `270px`. + +# --hints-- + +Your `.label` selector should have a `width` property set to `270px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +--fcc-editable-region-- +.label { + border: 2px solid black; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md new file mode 100644 index 00000000000..f273bf9a263 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md @@ -0,0 +1,64 @@ +--- +id: 615f39d7da41b15851fa3fb9 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give your `.label` selector a `margin` property set to `20px auto`, and a `padding` property set to `0 7px`. + +# --hints-- + +Your `.label` selector should have a `margin` property set to `20px auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto'); +``` + +Your `.label` selector should have a `padding` property set to `0 7px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +--fcc-editable-region-- +.label { + border: 2px solid black; + width: 270px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md new file mode 100644 index 00000000000..63304b702e4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md @@ -0,0 +1,70 @@ +--- +id: 615f3b091162165948e1cb33 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +If you inspect your `.label` element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size. + +To solve this, reset the box model by creating a `*` selector and giving it a `box-sizing` property of `border-box`. + +# --hints-- + +You should create a `*` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Your `*` selector should have a `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md new file mode 100644 index 00000000000..cb116abcc95 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md @@ -0,0 +1,74 @@ +--- +id: 615f3cafd794015aa9547a6d +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Remember that the use of `h1`, `h2`, and similar tags determine the semantic structure of your HTML. However, you can adjust the CSS of these elements to control the visual flow and hierarchy. + +Create an `h1` rule and set the `font-weight` property to `800`. This will make your `h1` text bolder. + +# --hints-- + +You should create an `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +Your `h1` selector should have a `font-weight` property set to `800`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md new file mode 100644 index 00000000000..43f69ec85a5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md @@ -0,0 +1,68 @@ +--- +id: 615f3d9e59db4b5b8e960762 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Give your `h1` selector a `text-align` property of `center`. + +# --hints-- + +Your `h1` selector should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md new file mode 100644 index 00000000000..a0c09b066dc --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md @@ -0,0 +1,69 @@ +--- +id: 615f3e1b7233ee5c7595771f +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`. + +# --hints-- + +Your `h1` selector should have a `margin` property set to `-4px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; + text-align: center; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md new file mode 100644 index 00000000000..56ea0615281 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md @@ -0,0 +1,94 @@ +--- +id: 615f3ed16592445e57941aec +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Lines can help separate and group important content, especially when space is limited. + +Create a `div` element below your `h1` element, and give it a `class` attribute set to `divider`. + +# --hints-- + +You should create a new `div`. + +```js +assert(document.querySelectorAll('div')?.length === 2); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider')); +``` + +Your `.divider` element should be within your `.label` element. + +```js +assert(document.querySelector('.label')?.querySelector('.divider')); +``` + +Your `.divider` element should come after your `h1` element. + +```js +assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} + +p { + margin: 0; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md new file mode 100644 index 00000000000..84de4ac6133 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md @@ -0,0 +1,89 @@ +--- +id: 615f405b89a7ec5f8e2d11f4 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Create a selector for your new `.divider` and set the `border-bottom` property to `1px solid #888989`. Also give it a top and bottom margin of `2px`. It should not have any left or right margin. + +# --hints-- + +You should create a `.divider` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')); +``` + +Your `.divider` selector should have a `border-bottom` property set to `1px solid #888989`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)'); +``` + +Your `.divider` selector should have a `margin` property set to `2px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} + +p { + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md new file mode 100644 index 00000000000..79da01c2a7f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md @@ -0,0 +1,82 @@ +--- +id: 615f40b01f680e608d360ed4 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +The `letter-spacing` property can be used to adjust the space between each character of text in an element. + +Give your `h1` selector a `letter-spacing` property set to `0.15px` to space them out a bit more. + +# --hints-- + +Your `h1` selector should have a `letter-spacing` property set to `0.15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} +--fcc-editable-region-- + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md new file mode 100644 index 00000000000..9fea5c17ce0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md @@ -0,0 +1,89 @@ +--- +id: 615f4172e9eec061d6456221 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Nutrition labels have a lot of bold text to draw attention to important information. Rather than targeting each element that needs to be bold, it is more efficient to use a class to apply the bold styling to every element. + +Give your second `p` element a `class` attribute set to `bold`. + +# --hints-- + +Your second `p` element should have a `class` attribute set to `bold`. + +```js +assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold')); +``` + +Your first `p` element should not have a `class` attribute set to `bold`. + +```js +assert(!document.querySelector('p')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px; +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md new file mode 100644 index 00000000000..56e13a5ed71 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md @@ -0,0 +1,102 @@ +--- +id: 615f41c979787462e76dab90 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Your new class does not have any styling yet. Create a `.bold` selector and give it a `font-weight` property set to `800` to make the text bold. + +Go ahead and remove the `font-weight` property from your `h1` selector as well. + +# --hints-- + +You should have a `.bold` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bold')); +``` + +Your `.bold` selector should have a `font-weight` property set to `800`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800'); +``` + +Your `h1` selector should not have a `font-weight` property. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === ""); +``` + +You should not remove your `h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px; +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md new file mode 100644 index 00000000000..de2bc32eb1e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md @@ -0,0 +1,84 @@ +--- +id: 615f423cf65d5864132a0956 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Give your `h1` element a `class` attribute set to `bold`. This will make the text bold again. + +# --hints-- + +Your `h1` element should have a `class` attribute set to `bold`. + +```js +assert(document.querySelector('h1')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md new file mode 100644 index 00000000000..11cdbeaca13 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md @@ -0,0 +1,104 @@ +--- +id: 615f42a021625f656101ef93 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Horizontal spacing between equally important elements can increase the readability of your text. + +Wrap the text `2/3 cup (55g)` in a `span` element, and give it a `class` attribute set to `right`. + +# --hints-- + +You should create a new `span` element. + +```js +assert(document.querySelector('span')); +``` + +Your new `span` element should have the `class` attribute set to `right`. + +```js +assert(document.querySelector('span')?.classList?.contains('right')); +``` + +Your `span` element should have the text `2/3 cup (55g)`. + +```js +assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)'); +``` + +Your `p` element should still have the text `Serving size 2/3 cup (55g)`. + +```js +assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md new file mode 100644 index 00000000000..a827ed632ca --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md @@ -0,0 +1,94 @@ +--- +id: 615f4bfb9de4a16703b56eb6 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `float` property is used to place an element on the left or right of its container, allowing other content (such as text) to wrap around it. + +Create a new `.right` selector and set the `float` property to `right`. + +# --hints-- + +You should create a new `.right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')); +``` + +Your `.right` selector should have a `float` property set to `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md new file mode 100644 index 00000000000..c613e7f30f1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md @@ -0,0 +1,104 @@ +--- +id: 615f4ce9d877b668417c0c42 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Wrap everything within the `.label` element in a new `header` element. + +# --hints-- + +You should create a new `header` element. + +```js +assert(document.querySelector('header')); +``` + +Your `header` element should be within your `.label` element. + +```js +assert(document.querySelector('header')?.parentElement?.classList?.contains('label')); +``` + +Your `h1`, `div`, and `p` elements should be within your new `header` element. + +```js +const children = document.querySelector('header')?.children; +assert(children?.[0]?.localName === 'h1'); +assert(children?.[1]?.localName === 'div'); +assert(children?.[2]?.localName === 'p'); +assert(children?.[3]?.localName === 'p'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +--fcc-editable-region-- +
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md new file mode 100644 index 00000000000..d7c0c3f1f41 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md @@ -0,0 +1,105 @@ +--- +id: 615f4dde9d72e3694cb9ee3b +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Now update your `h1` selector to be `header h1` to specifically target your `h1` element within your new `header`. + +# --hints-- + +You should have a `header h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('header h1')); +``` + +You should not have an `h1` selector. + +```js +assert.isNull(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +You should not change any properties in the selector. + +```js +const style = new __helpers.CSSHelp(document).getStyle('header h1'); +assert(style?.textAlign === 'center'); +assert(style?.margin === '-4px 0px'); +assert(style?.letterSpacing === '0.15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +--fcc-editable-region-- +h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} +--fcc-editable-region-- + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md new file mode 100644 index 00000000000..2fd85ad3563 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md @@ -0,0 +1,105 @@ +--- +id: 615f4ec58334106a4170c2a8 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider lg`. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div')?.length === 3); +``` + +Your new `div` element should come after your `header` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); +``` + +Your new `div` element should have the `class` attribute set to `divider lg`. + +```js +const div = document.querySelector('.label')?.lastElementChild; +assert(div?.classList?.contains('divider')); +assert(div?.classList?.contains('lg')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md new file mode 100644 index 00000000000..5b5d116e022 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md @@ -0,0 +1,111 @@ +--- +id: 615f4f9e4a40566b776a8f38 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Create a new `.lg` selector and give it a `height` property set to `10px`. Also create an `.lg, .md` selector and set the `background-color` property to `black`. + +# --hints-- + +You should have a new `.lg` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg')); +``` + +Your `.lg` selector should have a `height` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg')?.height === '10px'); +``` + +You should have a new `.lg, .md` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')); +``` + +Your `.lg, .md` selector should have a `background-color` property set to `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md new file mode 100644 index 00000000000..156382a73d0 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md @@ -0,0 +1,101 @@ +--- +id: 615f50473cc0196c6dd3892a +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +You may notice there is still a small border at the bottom of your `.lg` element. To reset this, give your `.lg, .md` selector a `border` property set to `0`. + +Note: the `md`(medium) class will be utilized in step 37 for the thinner bars of the nutrition label. + +# --hints-- + +Your `.lg, .md` selector should have a `border` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +--fcc-editable-region-- +.lg, .md { + background-color: black; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md new file mode 100644 index 00000000000..cc1b6599b46 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md @@ -0,0 +1,113 @@ +--- +id: 615f51257a8a516d80b6c743 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Create a new `div` below your `.lg` element and give it a `class` attribute set to `calories-info`. + +# --hints-- + +You should create another `div` element. + +```js +assert(document.querySelectorAll('div')?.length === 4); +``` + +Your new `div` should have a `class` attribute set to `calories-info`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info')); +``` + +Your new `div` should come after the `.lg` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('lg')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md new file mode 100644 index 00000000000..b84b3468ee9 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md @@ -0,0 +1,116 @@ +--- +id: 615f51e4e5b24a6e80eccce1 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Within your `.calories-info` element, create a `p` element. Give that `p` element a `class` attribute set to `bold sm-text`, and the text `Amount per serving`. + +# --hints-- + +You should create a new `p` element within your `.calories-info` element. + +```js +assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'p'); +``` + +Your new `p` element should have a `class` attribute set to `bold sm-text`. + +```js +assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('bold')); +assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('sm-text')); +``` + +Your new `p` element should have the text `Amount per serving`. + +```js +assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'Amount per serving'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md new file mode 100644 index 00000000000..e1e10c1c30f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md @@ -0,0 +1,113 @@ +--- +id: 615f522dea4f776f64dc3e91 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `rem` unit stands for `root em`, and is relative to the font size of the `html` element. + +Create an `.sm-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). + +# --hints-- + +You should have an `.sm-text` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sm-text')); +``` + +Your `.sm-text` selector should have a `font-size` property set to `0.85rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md new file mode 100644 index 00000000000..17a0c4e20f7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md @@ -0,0 +1,138 @@ +--- +id: 615f5486b8fd4b71633f69b0 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below your `.sm-text` element, create a new `h1` element with the text `Calories 230`. Wrap the `230` portion of the text in a `span` element with the `class` set to `right`. + +# --hints-- + +You should have a new `h1` element within your `.calories-info` element. + +```js +assert(document.querySelector('.calories-info')?.querySelector('h1')) +``` + +Your `h1` element should come after your `.sm-text` element. + +```js +assert(document.querySelector('.sm-text')?.nextElementSibling?.localName === 'h1'); +``` + +Your `h1` element should have the text `Calories 230`. + +```js +// the float: right property does weird things to the inner text. +assert(document.querySelector('.calories-info')?.lastElementChild?.innerText.match(/Calories[\s|\n]*230/)); +``` + +You should create a `span` element within your new `h1` element. + +```js +assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')); +``` + +Your `span` element should have the `class` set to `right`. + +```js +assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +``` + +Your `span` element should have the text `230`. + +```js +assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.innerText === '230'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+--fcc-editable-region-- +
+

Amount per serving

+
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md new file mode 100644 index 00000000000..d4458ee3f7e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md @@ -0,0 +1,119 @@ +--- +id: 615f575b50b91e72af079480 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Create a new `.calories-info h1` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. + +# --hints-- + +You should have a new `.calories-info h1` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')); +``` + +Your new `.calories-info h1` selector should have a `margin` property set to `-5px -2px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '-2px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '-2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md new file mode 100644 index 00000000000..f53ef470cf7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md @@ -0,0 +1,120 @@ +--- +id: 615f5af373a68e744a3c5a76 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Create a `.calories-info span` selector and set the `font-size` to `1.2em`. + +# --hints-- + +You should create a `.calories-info span` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')); +``` + +Your `.calories-info span` selector should have a `font-size` property set to `1.2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '1.2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md new file mode 100644 index 00000000000..cfd6cc33c9e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md @@ -0,0 +1,116 @@ +--- +id: 615f5c1cb7575c7551ed8a40 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The larger font size of the number `230` is causing it to overflow. Give the `.calories-info h1` an `overflow` property set to `hidden` to avoid this. + +# --hints-- + +Your `.calories-info h1` selector should have an `overflow` property set to `hidden`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +--fcc-editable-region-- +.calories-info h1 { + margin: -5px -2px; +} +--fcc-editable-region-- + +.calories-info span { + font-size: 1.2em; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md new file mode 100644 index 00000000000..9d68b8354d1 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md @@ -0,0 +1,119 @@ +--- +id: 615f5fd85d0062761f288364 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Typography is often more art than science. You may have to tweak things like alignment until it looks correct. + +Give your `.calories-info span` selector a `margin-top` set to `-7px`. This will shift your `230` text into place. + +# --hints-- + +Your `.calories-info span` selector should have a `margin-top` set to `-7px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTop === '-7px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +--fcc-editable-region-- +.calories-info span { + font-size: 1.2em; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md new file mode 100644 index 00000000000..b9b50a67f0b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md @@ -0,0 +1,126 @@ +--- +id: 615f61338c8ca176d6445574 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider md`. + +# --hints-- + +You should create a new `div` within your `.label` element. + +```js +assert(document.querySelectorAll('.label > div')?.length === 3) +``` + +Your new `div` should have the `class` attribute set to `divider md`. This div should be the last element in your `.label` element. + +```js +const div = document.querySelector('.label')?.lastElementChild; +assert(div?.classList?.contains('divider') && div?.classList?.contains('md')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md new file mode 100644 index 00000000000..235c6490c3a --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md @@ -0,0 +1,127 @@ +--- +id: 615f666ac5edea782feb7e75 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Create an `.md` selector and give it a `height` property of `5px`. + +# --hints-- + +You should create an `.md` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.md')); +``` + +Your `.md` selector should have a `height` property set to `5px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md new file mode 100644 index 00000000000..62fb6ca61de --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md @@ -0,0 +1,153 @@ +--- +id: 615f671b6d1919792745aa5d +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Create a new `div` element below your `.md` element. Give it a `class` attribute set to `daily-value sm-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `right bold`. + +# --hints-- + +You should create a new `div` element after your `.md` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider')); +assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md')); +``` + +Your new `div` should have a `class` attribute set to `daily-value sm-text`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value')); +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text')); +``` + +Your new `div` element should have a `p` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `% Daily Value *`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *'); +``` + +Your new `p` element should have a `class` attribute set to `right bold`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); +assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md new file mode 100644 index 00000000000..80707dcd715 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md @@ -0,0 +1,139 @@ +--- +id: 615f6823d0815b7a991f2a75 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The `float` styling is causing the new `p` element to be outside of the label's border. Use your existing `.divider` element as an example to add a new divider after the `p` element. + +# --hints-- + +You should create a new `div` within your `.daily-value.sm-text` element. + +```js +assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1) +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider')) +``` + +Your new `div` should come after your `p` element. + +```js +assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+--fcc-editable-region-- +
+

% Daily Value *

+ +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md new file mode 100644 index 00000000000..655b881bfe7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md @@ -0,0 +1,127 @@ +--- +id: 615f6a7d4ba8037bc086c2c7 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Give the `.divider` selector a `clear` property set to `right`. This will clear the `float` property, pushing the divider and any following content down below the `float` text. + +# --hints-- + +Your `.divider` selector should have a `clear` property set to `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +--fcc-editable-region-- +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; +} +--fcc-editable-region-- + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md new file mode 100644 index 00000000000..7cb965c2767 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md @@ -0,0 +1,165 @@ +--- +id: 615f6b2d164f81809efd9bdc +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +After your last `.divider` element, create a `p` element and give it the text `Total Fat 8g 10%`. Wrap `Total Fat` in a `span` element with the `class` set to `bold`. Wrap `10%` in another `span` element with the `class` set to `bold right`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Total Fat 8g 10%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/)); +``` + +Your `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should wrap the text `Total Fat`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); +``` + +Your first `span` element should have the `class` set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); +``` + +Your second `span` element should wrap the text `10%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%'); +``` + +Your second `span` element should have the `class` set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md new file mode 100644 index 00000000000..054289a7759 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md @@ -0,0 +1,156 @@ +--- +id: 615f6cc778f7698258467596 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Below your element with the `Total Fat` text, create a new `p` element with the text `Saturated Fat 1g 5%`. Wrap the `5%` in a `span` with the `class` attribute set to `bold right`. + +# --hints-- + +You should create a new `p` element below your element with the `Total Fat` text. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); +``` + +Your new `p` element should have the text `Saturated Fat 1g 5%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span'); +``` + +Your `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your `span` element should wrap the `5%` text. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md new file mode 100644 index 00000000000..569f99e7715 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md @@ -0,0 +1,130 @@ +--- +id: 615f6fddaac1e083502d3e6a +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +This new `p` element will need to be indented. Give it a `class` set to `indent`. + +# --hints-- + +Your `p` element with the text `Saturated Fat 1g 5%` should have a `class` attribute set to `indent`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+--fcc-editable-region-- +

Saturated Fat 1g 5%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md new file mode 100644 index 00000000000..592f9c3bd85 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md @@ -0,0 +1,138 @@ +--- +id: 615f70077a4ff98424236c1e +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Create a new `.indent` selector and give it a `margin-left` property set to `1em`. + +# --hints-- + +You should have a new `.indent` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.indent')); +``` + +Your new `.indent` selector should have a `margin-left` property set to `1em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md new file mode 100644 index 00000000000..1f363003d93 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md @@ -0,0 +1,142 @@ +--- +id: 615f72a872354a850d4f533e +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Create a `.daily-value p` selector to target all of your `p` elements in the `daily-value` section. Give this new selector a `border-bottom` set to `1px solid #888989`. + +# --hints-- + +You should have a new `.daily-value p` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')); +``` + +Your `.daily-value p` selector should have a `border-bottom` property set to `1px solid #888989`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md new file mode 100644 index 00000000000..8adb2317608 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md @@ -0,0 +1,149 @@ +--- +id: 615f74a71f1e498619e38ee8 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +The bottom borders under your `% Daily Value *` and `Saturated Fat 1g 5%` elements do not extend the full width of the label. Add `no-divider` to the `class` for these two elements. + +# --hints-- + +Your `p` element with the text `% Daily Value *` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. + +```js +const p = document.querySelector('.daily-value.sm-text')?.firstElementChild; +assert(p?.classList?.contains('no-divider')); +assert(p?.classList?.contains('bold')); +assert(p?.classList?.contains('right')); +``` + +Your `p` element with the text `Saturated Fat 1g 5%` should have `no-divider` added to the `class` attribute. Do not remove the existing classes. + +```js +const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +assert(p?.classList?.contains('no-divider')); +assert(p?.classList?.contains('indent')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+--fcc-editable-region-- +
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md new file mode 100644 index 00000000000..008b34a3751 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md @@ -0,0 +1,161 @@ +--- +id: 615f7ad94380408d971d14f6 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The `:not` pseudo-selector can be used to select all elements that do not match the given CSS rule. + +```css +div:not(#example) { + color: red; +} +``` + +The above selects all `div` elements without an `id` of `example`. + +Modify your `.daily-value p` selector to exclude the `.no-divider` elements. + +# --hints-- + +You should have a `.daily-value p:not(.no-divider)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)')); +``` + +You should not have a `.daily-value p` selector. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p')); +``` + +You should not change the properties in the `.daily-value p:not(.no-divider)` selector. + +```js +const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'); +assert(style?.borderBottom === '1px solid rgb(136, 137, 137)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +--fcc-editable-region-- +.daily-value p { + border-bottom: 1px solid #888989; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md new file mode 100644 index 00000000000..048f474b01d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md @@ -0,0 +1,146 @@ +--- +id: 615f7bc680f7168ea01ebf99 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Now you will have to add separate dividers below your `.no-divider` elements. + +Your first `.no-divider` element has a `.divider` after it. Create another `.divider` after your second `.no-divider` element. + +# --hints-- + +You should create a new `div` at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md new file mode 100644 index 00000000000..c1b73b41197 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md @@ -0,0 +1,165 @@ +--- +id: 615f7c71eab8218f846e4503 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +After your last `.divider`, create another `p` element with the text `Trans Fat 0g`. Italicize the word `Trans` by wrapping it in an `i` element. Give the new `p` element the `class` attribute set to `indent no-divider`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Trans Fat 0g`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); +``` + +Your new `p` element should have the `class` attribute set to `indent no-divider`. + +```js +const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; +assert(p?.classList?.contains('indent')); +assert(p?.classList?.contains('no-divider')); +``` + +Your new `p` element should have an `i` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i'); +``` + +Your `i` element should wrap the text `Trans`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md new file mode 100644 index 00000000000..8540c74155e --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md @@ -0,0 +1,146 @@ +--- +id: 615f7d489a581590d1350288 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Create another `.divider` after your last `p` element. + +# --hints-- + +You should create a new `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `div` element should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md new file mode 100644 index 00000000000..405e0647f87 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md @@ -0,0 +1,178 @@ +--- +id: 615f7de4487b64919bb4aa5e +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +After your last `.divider`, create a new `p` element with the text `Cholesterol 0mg 0%`. Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` attribute set to `bold`. Wrap the text `0%` in another `span` element, with the `class` set to `bold right`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Cholesterol 0mg 0%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/)); +``` + +Your new `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `Cholesterol`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol'); +``` + +Your second `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your second `span` element should wrap the text `0%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md new file mode 100644 index 00000000000..432939d693b --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -0,0 +1,179 @@ +--- +id: 615f7e7281626a92bbd62da8 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Below your last `p` element, create another `p` element with the text `Sodium 160mg 7%`. Wrap the text `Sodium` in a `span` element with a `class` attribute set to `bold`. Wrap the `7%` text in another `span` element with the `class` set to `bold right`. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Sodium 160mg 7%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/)); +``` + +Your new `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `Sodium`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium'); +``` + +Your second `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your second `span` element should wrap the text `7%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md new file mode 100644 index 00000000000..815359307b7 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md @@ -0,0 +1,180 @@ +--- +id: 615f7ecb09de9a938ef94756 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Add another `p` element with the text `Total Carbohydrate 37g 13%`. Like before, use `span` elements to make the text `Total Carbohydrate` bold, and the text `13%` bold and right aligned. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Total Carbohydrate 37g 13%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); +``` + +Your new `p` element should have two `span` elements. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Your first `span` element should have the `class` attribute set to `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `Total Carbohydrate`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); +``` + +Your second `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Your second `span` element should wrap the text `13%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md new file mode 100644 index 00000000000..e4b6b8e2f57 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md @@ -0,0 +1,164 @@ +--- +id: 615f7fa959ab75948f96a0d6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Below your last `p` element, add another `p` element with the text `Dietary Fiber 4g`. Give the `p` element the `class` necessary to indent it and remove the dividing border. Then create a divider below that `p` element. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Dietary Fiber 4g`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); +``` + +Your new `p` element should have the `class` attribute set to `indent no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md new file mode 100644 index 00000000000..1bcd018908d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md @@ -0,0 +1,166 @@ +--- +id: 615f808d85793195b0f53be9 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Create another `p` element after your last `.divider`, and give it the text `Total Sugars 12g`. Assign that `p` element the `class` values necessary to indent it and remove the bottom border. Then create another `.divider` below your new `p` element. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Total Sugars 12g`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); +``` + +Your new `p` element should have the `class` attribute set to `indent no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md new file mode 100644 index 00000000000..4b68bdd6b66 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md @@ -0,0 +1,150 @@ +--- +id: 615f829d07b18f96f6f6684b +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +The advantage to creating these dividers is that you can apply specific classes to style them individually. Add `dbl-indent` to the `class` for your last `.divider`. + +# --hints-- + +Your last `.divider` element should have `dbl-indent` added to the `class`. Do not remove the existing value. + +```js +const last = document.querySelector('.daily-value.sm-text')?.lastElementChild; +assert(last?.classList?.contains('dbl-indent')); +assert(last?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md new file mode 100644 index 00000000000..f120cb64b2f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md @@ -0,0 +1,156 @@ +--- +id: 615f83ef928ec9982b785b6a +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Create a `.dbl-indent` selector and give it a left margin of `2em`. + +# --hints-- + +You should have a new `.dbl-indent` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')); +``` + +Your `.dbl-indent` selector should have a `margin-left` property set to `2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md new file mode 100644 index 00000000000..64d06a660a5 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md @@ -0,0 +1,193 @@ +--- +id: 615f84f246e8ba98e3cd97be +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Below your `.dbl-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. Your new `p` element should also be double indented, and have no bottom border. Use a `span` to make the `20%` bold and right aligned. + +Then create another divider after that `p` element. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Includes 10g Added Sugars 20%`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); +``` + +Your new `p` element should have the `class` attribute set to `dbl-indent no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span'); +``` + +Your `span` element should have the `class` attribute set to `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right')); +``` + +Your `span` element should wrap the text `20%`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%'); +``` + +Your new `div` should have the `class` attribute set to `divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md new file mode 100644 index 00000000000..cd8f2458700 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md @@ -0,0 +1,176 @@ +--- +id: 615f887466db4ba14b5342cc +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. + +Following this element, create a large divider. + +# --hints-- + +You should create a new `p` and `div` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); +``` + +Your new `p` element should have the text `Protein 3g`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); +``` + +Your new `p` element should have the `class` attribute set to `no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); +``` + +Your new `div` should have the `class` attribute set to `divider lg`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md new file mode 100644 index 00000000000..a2328b173c3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md @@ -0,0 +1,175 @@ +--- +id: 615f89e055040ba294719d2f +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`. Use a `span` to make the `10%` align to the right, but do not make it bold. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the text `Vitamin D 2mcg 10%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +``` + +Your `span` element should have the `class` set to `right`. Remember you should not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md new file mode 100644 index 00000000000..82801b25679 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md @@ -0,0 +1,202 @@ +--- +id: 615f8bfe0f30a1a3c340356b +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Create another `p` element, give it the text `Calcium 260mg 20%`. Align `20%` to the right. Below that, create a `p` element with the text `Iron 8mg 45%`, aligning the `45%` to the right. + +# --hints-- + +You should create two new `p` elements at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); +``` + +Your first new `p` element should have the text `Calcium 260mg 20%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/)); +``` + +Your first new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span'); +``` + +Your first `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold')); +``` + +Your first `span` element should wrap the text `20%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%'); +``` + +Your second new `p` element should have the text `Iron 8mg 45%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/)); +``` + +Your second new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span'); +``` + +Your second `span` element should have the `class` attribute set to `right`. Remember, do not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md new file mode 100644 index 00000000000..d9873550e4d --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md @@ -0,0 +1,184 @@ +--- +id: 615f8f1223601fa546e93f31 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Create the final `p` element for your `.daily-value` section. Give it the text `Potassium 235mg 6%`. Align the `6%` text to the right, and remove the bottom border of the `p` element. + +# --hints-- + +You should create a new `p` element at the end of your `.daily-value.sm-text` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the `class` attribute set to `no-divider`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider')); +``` + +Your new `p` element should have the text `Potassium 235mg 6%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/)); +``` + +Your new `p` element should have a `span` element. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); +``` + +Your `span` element should have the `class` set to `right`. Remember you should not make it bold. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); +assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+--fcc-editable-region-- +

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md new file mode 100644 index 00000000000..540ab15d1a3 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md @@ -0,0 +1,192 @@ +--- +id: 615f905fbd1017a65ca224eb +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Add a medium divider after your `.daily-value` element. Below that new divider, create a `p` element with the `class` attribute set to `note`. + +Give the `p` element the following text: + +```markup +* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice. +``` + +# --hints-- + +You should create a new `div` after your `.daily-value` element. + +```js +assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div'); +``` + +Your new `div` should have the `class` set to `divider md`. + +```js +assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider')); +assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md')); +``` + +You should create a `p` element after your new `div` element. + +```js +assert(document.querySelector('.label')?.lastElementChild?.localName === 'p'); +``` + +Your new `p` element should have the `class` set to `note`. + +```js +assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note')); +``` + +Your new `p` element should have the provided text. + +```js +assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md new file mode 100644 index 00000000000..7f44865429f --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md @@ -0,0 +1,176 @@ +--- +id: 615f94786869e1a7fec54375 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Create a `.note` selector, and set the size of the font to `0.6rem`. Also set the top and bottom margins to `5px`, removing the left and right margins. + +# --hints-- + +You should have a new `.note` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')); +``` + +Your `.note` selector should have a `font-size` property set to `0.6rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem'); +``` + +Your `.note` selector should have a `margin` property set to `5px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md new file mode 100644 index 00000000000..cecb81aeeb4 --- /dev/null +++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -0,0 +1,325 @@ +--- +id: 615f951dff9317a900ef683f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Give the `.note` selector a left and right padding of `8px`, removing the top and bottom padding. Also set the `text-indent` property to `-8px`. + +With these last changes, your nutrition label is complete! + +# --hints-- + +Your `.note` selector should have a `padding` property set to `0 8px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px'); +``` + +Your `.note` selector should have a `text-indent` property set to `-8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +--fcc-editable-region-- +.note { + font-size: 0.6rem; + margin: 5px 0; +} +--fcc-editable-region-- +``` + +## --solutions-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

+
+
+
+

% Daily Value *

+
+

Total Fat 8g 10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+

Cholesterol 0mg 0%

+

Sodium 160mg 7%

+

Total Carbohydrate 37g 13%

+

Dietary Fiber 4g

+
+

Total Sugars 12g

+
+

Includes 10g Added Sugars 20% +

+

Protein 3g

+
+

Vitamin D 2mcg 10%

+

Calcium 260mg 20%

+

Iron 8mg 45%

+

Potassium 235mg 6%

+
+
+

* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.dbl-indent { + margin-left: 2em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} + +.note { + font-size: 0.6rem; + margin: 5px 0; + padding: 0 8px; + text-indent: -8px; +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md new file mode 100644 index 00000000000..02a51b6a178 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md @@ -0,0 +1,78 @@ +--- +id: 62a115879a6d51422652cbfc +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Create four `div` elements within your `#game` element. Give them the following respective `id` values, in order: `stats`, `controls`, `monsterStats`, and `text`. + +# --hints-- + +You should create four new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 5); +``` + +You should give one of the new `div` elements an `id` of `stats`. + +```js +assert.exists(document.querySelector('div#stats')); +``` + +You should give one of the new `div` elements an `id` of `controls`. + +```js +assert.exists(document.querySelector('div#controls')); +``` + +You should give one of the new `div` elements an `id` of `monsterStats`. + +```js +assert.exists(document.querySelector('div#monsterStats')); +``` + +You should give one of the new `div` elements an `id` of `text`. + +```js +assert.exists(document.querySelector('div#text')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b; +} +assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text')); +``` + +You should place the new `div` elements within the `#game` element. + +```js +assert.equal(document.querySelector('#game')?.children?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + +--fcc-editable-region-- + +
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md new file mode 100644 index 00000000000..32588eccbae --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md @@ -0,0 +1,70 @@ +--- +id: 62a1166ed9a56d439c0770e7 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Create three `span` elements within your `#stats` element. Give each of them the class `stat`. Then give the first one the text `XP: 0`, the second one the text `Health: 100`, and the third one the text `Gold: 50`. + +# --hints-- + +You should have three `span` elements within the `#stats` element. + +```js +const spans = document.querySelectorAll('#stats > span'); +assert.equal(spans?.length, 3); +``` + +You should give the new three `span` elements a class of `stat`. + +```js +assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3); +``` + +Your first `.stat` element should have the provided text `XP: 0`. + +```js +assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0'); +``` + +Your second `.stat` element should have the provided text `Health: 100`. + +```js +assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100'); +``` + +Your third `.stat` element should have the provided text `Gold: 50`. + +```js +assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + +--fcc-editable-region-- + +
+
+ +
+
+
+
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md new file mode 100644 index 00000000000..5c62cdc804a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md @@ -0,0 +1,167 @@ +--- +id: 62a23c1d505bfa13747c8a9b +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Wrap the numbers `0`, `100`, and `50` in `span` elements, and wrap those new `span` elements in `strong` elements. Then give your new `span` elements `id` values of `xpText`, `healthText`, and `goldText`, respectively. + +# --hints-- + +You should add a `strong` element in your first `.stat` element. + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +Your first new `strong` element should have a `span` element. + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +Your first nested `span` element should have the `id` of `xpText`. + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'xpText'); +``` + +Your first `span` element should be wrapped around the text `0`. + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '0'); +``` + +The text of your first `.stat` element should still be `XP: 0`. + +```js +const stat = document.querySelectorAll('.stat')[0]; +assert.equal(stat.innerText, 'XP: 0'); +``` + +You should add a `strong` element in your second `.stat` element. + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +Your second new `strong` element should have a `span` element. + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +Your second nested `span` element should have the `id` of `healthText`. + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'healthText'); +``` + +Your second `span` element should be wrapped around the text `100`. + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '100'); +``` + +The text of your second `.stat` element should still be `Health: 100`. + +```js +const stat = document.querySelectorAll('.stat')[1]; +assert.equal(stat.innerText, 'Health: 100'); +``` + +You should add a `strong` element in your third `.stat` element. + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +Your third new `strong` element should have a `span` element. + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +Your third nested `span` element should have the `id` of `goldText`. + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'goldText'); +``` + +Your third `span` element should be wrapped around the text `50`. + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '50'); +``` + +The text of your third `.stat` element should still be `Gold: 50`. + +```js +const stat = document.querySelectorAll('.stat')[2]; +assert.equal(stat.innerText, 'Gold: 50'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+--fcc-editable-region-- + XP: 0 + Health: 100 + Gold: 50 +--fcc-editable-region-- +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md new file mode 100644 index 00000000000..5a36b14c83c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md @@ -0,0 +1,99 @@ +--- +id: 62a23cb9bc467a147516b500 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +For your `#controls` element, create three `button` elements. The first should have the `id` set to `button1`, and the text `Go to store`. The second should have the `id` set to `button2`, and the text `Go to cave`. The third should have the `id` set to `button3`, and the text `Fight dragon`. + +# --hints-- + +You should add three `button` elements to your `#controls` element. + +```js +const buttons = document.querySelectorAll('#controls > button'); +assert.exists(buttons); +assert.equal(buttons.length, 3); +``` + +Your first button should have the `id` set to `button1`. + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button1 = buttons[0]; +assert.equal(button1.id, 'button1'); +``` + +Your first button should have the text `Go to store`. + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button1 = buttons[0]; +assert.equal(button1.innerText, 'Go to store'); +``` + +Your second button should have the `id` set to `button2`. + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button2 = buttons[1]; +assert.equal(button2.id, 'button2'); +``` + +Your second button should have the text `Go to cave`. + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button2 = buttons[1]; +assert.equal(button2.innerText, 'Go to cave'); +``` + +Your third button should have the `id` set to `button3`. + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button3 = buttons[2]; +assert.equal(button3.id, 'button3'); +``` + +Your third button should have the text `Fight dragon`. + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button3 = buttons[2]; +assert.equal(button3.innerText, 'Fight dragon'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+
+ + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md new file mode 100644 index 00000000000..d5d8c611c5c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md @@ -0,0 +1,104 @@ +--- +id: 62a23d1c5f1c93161f3582ae +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Similar to your `#stats` element, your `#monsterStats` element needs two `span` elements. Give them the class `stat` and give the first element the text `Monster Name: ` and the second the text `Health: `. After the text in each, add a `strong` element with an empty nested `span` element. + +# --hints-- + +Your `monsterStats` element should have two `span` elements. + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans.length, 2); +``` + +Your new `span` elements should both have a `class` value of `stat`. + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[0].className, 'stat'); +assert.equal(spans[1].className, 'stat'); +``` + +Your first `span` element should have the text `Monster Name: `. Make sure the spacing is correct. + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[0].innerText, 'Monster Name: '); +``` + +Your second `span` element should have the text `Health: `. Make sure the spacing is correct. + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[1].textContent, 'Health: '); +``` + +Your first `span` element should have a `strong` element with an empty nested `span` element. + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +const strong = spans[0]?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(strong); +assert.exists(span); +``` + +Your second `span` element should have a `strong` element with an empty nested `span` element. + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +const strong = spans[1]?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(strong); +assert.exists(span); +``` + +Your `strong` and `span` elements should come after the text. + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.match(spans[0].innerHTML, /Monster Name: /); +assert.match(spans[1].innerHTML, /Health: /); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md new file mode 100644 index 00000000000..2ffdc00b64b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md @@ -0,0 +1,62 @@ +--- +id: 62a2401b9842721796b72850 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Give your `#text` element the following text: + +```markup +Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. +You are in the town square. Where do you want to go? Use the buttons above. +``` + +# --hints-- + +Your `#text` element should have the above quoted text. + +```js +const text = document.querySelector('#text'); +assert.equal(text.innerText, "Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md new file mode 100644 index 00000000000..4a5a57ad8cf --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md @@ -0,0 +1,68 @@ +--- +id: 62a24068d60b671847d1d4e2 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now we need some quick styling. Start by giving the `body` a `background-color` set to `darkblue`. + +# --hints-- + +You should have a `body` selector. + +```js +const body = new __helpers.CSSHelp(document).getStyle('body'); +assert.exists(body); +``` + +Your `body` selector should have a `background-color` property set to `darkblue`. + +```js +const background = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); +assert.equal(background, 'darkblue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md new file mode 100644 index 00000000000..d59d46387be --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md @@ -0,0 +1,86 @@ +--- +id: 62a2409897ec621942234cf6 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Give the `#text` element a `background-color` of `black`, a `color` of `white`, and `10px` of padding on all sides. + +# --hints-- + +You should have a `#text` selector. + +```js +const text = new __helpers.CSSHelp(document).getStyle('#text'); +assert.exists(text); +``` + +Your `#text` element should have a `background-color` of `black`. + +```js +const background = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('background-color'); +assert.equal(background, 'black'); +``` + +Your `#text` element should have a `color` of `white`. + +```js +const color = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +Your `#text` element should have `10px` of padding on all sides. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('padding'); +assert.equal(padding, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md new file mode 100644 index 00000000000..2a21ac2c341 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md @@ -0,0 +1,113 @@ +--- +id: 62a240c67f3dbb1a1e6d95ee +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give your `#game` a maximum width of `500px` and a maximum height of `400px`. Set the `background-color` to `lightgray` and the `color` to `white`. Finally, use margins to center it and give it `10px` of padding on all four sides. + +# --hints-- + +You should have a `#game` selector. + +```js +const game = new __helpers.CSSHelp(document).getStyle('#game'); +assert.exists(game); +``` + +Your `#game` selector should have a `max-width` of `500px`. + +```js +const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width'); +assert.equal(maxWidth, '500px'); +``` + +Your `#game` selector should have a `max-height` of `400px`. + +```js +const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height'); +assert.equal(maxHeight, '400px'); +``` + +Your `#game` selector should have a `background-color` of `lightgray`. + +```js +const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color'); +assert.equal(background, 'lightgray'); +``` + +Your `#game` selector should have a `color` of `white`. + +```js +const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +Your `#game` selector should have a `margin` set to `0 auto`. + +```js +const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin'); +assert.equal(margin, '0px auto'); +``` + +Your `#game` selector should have `10px` of padding on all sides. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding'); +assert.equal(padding, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md new file mode 100644 index 00000000000..a0a17c0808d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md @@ -0,0 +1,101 @@ +--- +id: 62a24128d5e8af1b47ad1aab +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Give both your `#controls` and `#stats` elements a `border` of `1px solid black`, a `black` text color, and `5px` of padding. + +# --hints-- + +You should have a `#controls, #stats` selector. + +```js +const selector = new __helpers.CSSHelp(document).getStyle('#controls, #stats'); +assert.exists(selector); +``` + +Your `#controls, #stats` selector should have a `border` of `1px solid black`. + +```js +const border = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +Your `#controls, #stats` selector should have a `color` of `black`. + +```js +const color = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('color'); +assert.equal(color, 'black'); +``` + +Your `#controls, #stats` selector should have `5px` of padding. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md new file mode 100644 index 00000000000..deec272509f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md @@ -0,0 +1,127 @@ +--- +id: 62a24190868ca51c0b6e83c7 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Hide your `#monsterStats` element for now. Do not change any of the other styling. + +# --hints-- + +You should have a `#monsterStats` selector. + +```js +const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats'); +assert.exists(monsterStats); +``` + +Your `#monsterStats` selector should have a `display` property of `none`. + +```js +const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display'); +assert.equal(display, 'none'); +``` + +Your `#monsterStats` selector should have a `border` of `1px solid black`. + +```js +const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +Your `#monsterStats` selector should have `5px` of padding. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +Your `#monsterStats` selector should have a `color` of `white`. + +```js +const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +Your `#monsterStats` selector should have a `background-color` of `red`. + +```js +const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color'); +assert.equal(background, 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +--fcc-editable-region-- +#monsterStats { + + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md new file mode 100644 index 00000000000..7527ce74825 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md @@ -0,0 +1,101 @@ +--- +id: 62a241df03c1f61ce936f5d9 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Finally, give your `.stat` elements a `padding-right` of `10px`. + +# --hints-- + +You should have a `.stat` selector. + +```js +const stat = new __helpers.CSSHelp(document).getStyle('.stat'); +assert.exists(stat); +``` + +Your `.stat` selector should have a `padding-right` of `10px`. + +```js +const paddingRight = new __helpers.CSSHelp(document).getStyle('.stat')?.getPropertyValue('padding-right'); +assert.equal(paddingRight, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md new file mode 100644 index 00000000000..c65bb85e38f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md @@ -0,0 +1,108 @@ +--- +id: 62a2509ba163e020bb9d84ea +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Now you can start writing your JavaScript. Begin by creating a `script` element. This element is used to load JavaScript into your HTML file. You should use an opening `` tag. + +# --hints-- + +You should have a `script` element. + +```js +assert.isAtLeast(document.querySelectorAll('script').length, 2); +``` + +Your `script` element should have an opening tag. + +```js +assert.match(code, //i); +``` + +Your `script` element should have a closing tag. + +```js +assert.match(code, /<\/script\s*>/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md new file mode 100644 index 00000000000..2515e3330ca --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md @@ -0,0 +1,108 @@ +--- +id: 62a255dae245b52317da824a +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing `F12` or `Ctrl+Shift+I`. You can also click the "Console" button above the preview window to see our built-in console. The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging. + +Add a `console.log("Hello World");` line between your `script` tags, then click the "Console" button to open our console, and you should see the text `Hello World` in your console. + +Note how the line ends with a semi-colon. It is common practice in JavaScript to end your code lines with semi-colons. + +# --hints-- + +You should add a `console.log("Hello World");` line to your code. Don't forget the semi-colon. + +```js +assert.match(code, /console\.log\("Hello World"\);/); +``` + +Your `console.log("Hello World");` line should be between your `script` tags. + +```js +assert.match(code, / +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md new file mode 100644 index 00000000000..12d385f3107 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md @@ -0,0 +1,109 @@ +--- +id: 62a257659d0d1e2456f24ba2 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`. + +# --hints-- + +You should not have a `console.log("Hello World");` line in your code. + +```js +assert.notMatch(code, /console\.log\("Hello World"\);/); +``` + +Your `script` element should have a `src` attribute set to `./script.js`. + +```js +const script = document.querySelector("script[data-src$='script.js']"); +assert.exists(script); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md new file mode 100644 index 00000000000..af7153531cf --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md @@ -0,0 +1,102 @@ +--- +id: 62a39f5a5790eb27c1e5d4bf +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your view has been switched to your new `script.js` file. Remember that you can use the tabs above to switch between files. + +Add your `console.log("Hello World");` line to this file, and see it appear in your console. + +# --hints-- + +You should have a `console.log("Hello World");` line in your code. + +```js +assert.match(code, /console\.log\("Hello World"\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md new file mode 100644 index 00000000000..b40d5f4cc30 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md @@ -0,0 +1,132 @@ +--- +id: 62a3a0a3c0a4b32915d26a6e +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Remove your `console.log("Hello World");` line to begin writing your project code. + +In JavaScript, a variable is used to hold a value. To use a variable, you must first declare it. For example, to declare a variable called `camperbot`, you would write: + +```js +var camperbot; +``` + +The `var` keyword tells JavaScript you are declaring a variable. Declare a variable called `xp`. + +# --hints-- + +You should not have a `console.log("Hello World");` line in your code. + +```js +assert.notMatch(code, /console\.log\("Hello World"\);/); +``` + +You should use the `var` keyword to declare your variable. + +```js +assert.match(code, /var/); +``` + +You should declare a variable named `xp`. + +```js +assert.match(code, /xp/); +``` + +You should not assign a value to your variable. + +```js +assert.notMatch(code, /var xp =/); +``` + +Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /var xp;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +console.log("Hello World"); +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md new file mode 100644 index 00000000000..7fb32406762 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md @@ -0,0 +1,112 @@ +--- +id: 62a3a488b24fb32b91155d56 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Variables can be assigned a value. When you do this while you declare it, this is called initialization. For example: + +```js +var camperbot = "Bot"; +``` + +This would initialize the `camperbot` variable with a value of `Bot`. Initialize your `xp` variable to have a value of `0`. + +# --hints-- + +`xp` should have a value of `0`. + +```js +assert.equal(xp, 0); +``` + +You should initialize the `xp` variable to `0`. Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /var\s+xp\s*=\s*0\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md new file mode 100644 index 00000000000..278aa0789fc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md @@ -0,0 +1,136 @@ +--- +id: 62a3a75d8466a12e009eff76 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Initialize another variable called `health` with a value of `100`, and a variable called `gold` with a value of `50`. + +# --hints-- + +You should use `var` to declare a variable called `health`. + +```js +assert.match(code, /var health/); +``` + +You should initialize a variable called `health` with a value of `100`. + +```js +assert.match(code, /var health\s?=\s?100/); +``` + +You should use `var` to declare a variable called `gold`. + +```js +assert.match(code, /var gold/); +``` + +You should initialize a variable called `gold` with a value of `50`. + +```js +assert.match(code, /var gold\s?=\s?50/); +``` + +`health` should have a value of `100`. + +```js +assert.equal(health, 100); +``` + +`gold` should have a value of `50`. + +```js +assert.equal(gold, 50); +``` + +`xp` should still have a value of `0`. + +```js +assert.equal(xp, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md new file mode 100644 index 00000000000..606fdeb799a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md @@ -0,0 +1,122 @@ +--- +id: 62a3a7e4f1060e2fc5ffb34b +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create another variable called `currentWeapon` and set it to 0. + +When a variable name has multiple words, the convention in JavaScript is to use what's called camelCase. The first word is lowercase, and the first letter of every following word is uppercase. + +# --hints-- + +You should use `var` to declare a variable called `currentWeapon`. + +```js +assert.match(code, /var currentweapon/i); +``` + +You should use camelCase to name your variable. + +```js +assert.match(code, /currentWeapon/); +``` + +Your `currentWeapon` variable should be set to `0`. + +```js +assert.equal(currentWeapon, 0); +``` + +You should initialize your variable to `0`. + +```js +assert.match(code, /var currentWeapon\s?=\s?0/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +var health = 100; +var gold = 50; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md new file mode 100644 index 00000000000..63ecefac153 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md @@ -0,0 +1,138 @@ +--- +id: 62a3b365f1cdeb33efc2502e +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. + +Change all of your `var` keywords to `let`. + +# --hints-- + +You should not have any `var` keywords in your code. + +```js +assert.notMatch(code, /var/); +``` + +You should use the `let` keyword to declare your `xp` variable. + +```js +assert.match(code, /let xp/); +``` + +You should use the `let` keyword to declare your `health` variable. + +```js +assert.match(code, /let health/); +``` + +You should use the `let` keyword to declare your `gold` variable. + +```js +assert.match(code, /let gold/); +``` + +You should use the `let` keyword to declare your `currentWeapon` variable. + +```js +assert.match(code, /let currentWeapon/); +``` + +You should not change the values of your variables. + +```js +assert.equal(xp, 0); +assert.equal(health, 100); +assert.equal(gold, 50); +assert.equal(currentWeapon, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +var xp = 0; +var health = 100; +var gold = 50; +var currentWeapon = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md new file mode 100644 index 00000000000..f4a27916dea --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md @@ -0,0 +1,115 @@ +--- +id: 62a3b3eab50e193608c19fc6 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Using the `let` keyword, declare a variable called `fighting` but do not initialize it with a value. Remember to end your line with a semi-colon. + +# --hints-- + +You should use `let` to declare a variable `fighting`. + +```js +assert.match(code, /let fighting/); +``` + +Your `fighting` variable should not have a value. + +```js +assert.isUndefined(fighting); +``` + +You should not assign a value to your `fighting` variable. Don't forget the semi-colon at the end of the line. + +```js +assert.match(code, /let fighting;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md new file mode 100644 index 00000000000..c679c2cb1fe --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md @@ -0,0 +1,140 @@ +--- +id: 62a3b41c9494f937560640ab +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Declare two more variables named `monsterHealth` and `inventory`, but do not initialize them. + +# --hints-- + +You should use `let` to declare your `monsterHealth` variable. + +```js +assert.match(code, /let monsterHealth/i); +``` + +You should use camelCase to name your `monsterHealth` variable. + +```js +assert.match(code, /monsterHealth/); +``` + +`monsterHealth` should not have a value. + +```js +assert.isUndefined(monsterHealth); +``` + +You should not assign a value to your `monsterHealth` variable. Remember your semi-colon. + +```js +assert.match(code, /let monsterHealth;/); +``` + +You should use `let` to declare your `inventory` variable. + +```js +assert.match(code, /let inventory/i); +``` + +`inventory` should not have a value. + +```js +assert.isUndefined(inventory); +``` + +You should not assign a value to your `inventory` variable. Remember your semi-colon. + +```js +assert.match(code, /let inventory;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md new file mode 100644 index 00000000000..878b7879e25 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md @@ -0,0 +1,118 @@ +--- +id: 62a3b49686792938718b90d3 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The variables you have assigned have all had values that are numbers. JavaScript has multiple different data types. The next one you will use is the string. Strings are used to store things like words or text. Strings are surrounded with double quotes, single quotes, or backticks. Here is an example of declaring a variable with a string: + +```js +let developer = "Naomi"; +``` + +Assign the `inventory` variable to have the value of `stick`. + +# --hints-- + +You should set `inventory` to the string `stick`. + +```js +assert.equal(inventory, "stick"); +``` + +You should initialize your `inventory` variable with the string `stick`. + +```js +assert.match(code, /let\s+inventory\s*=\s*('|"|`)stick\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md new file mode 100644 index 00000000000..bb8a09862a3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md @@ -0,0 +1,142 @@ +--- +id: 62a3b506dbaead396f58a701 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The player's inventory in your game will be able to hold multiple items. You will need to use a data type that can do this. An array can be used to hold multiple values. For example: + +```js +let order = ["first", "second", "third"]; +``` + +This is an array which holds three values. Notice how the values are separated by commas. Change your `inventory` variable to be an array with the strings `stick`, `dagger`, and `sword`. + +# --hints-- + +Your `inventory` variable should be an array. + +```js +assert.isArray(inventory); +``` + +Your `inventory` variable should have three values. + +```js +assert.lengthOf(inventory, 3); +``` + +Your `inventory` variable should include the string `stick`. + +```js +assert.include(inventory, "stick"); +``` + +Your `inventory` variable should include the string `dagger`. + +```js +assert.include(inventory, "dagger"); +``` + +Your `inventory` variable should include the string `sword`. + +```js +assert.include(inventory, "sword"); +``` + +Your `inventory` variable should have the values in the correct order. + +```js +assert.deepEqual(inventory, ["stick", "dagger", "sword"]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = "stick"; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md new file mode 100644 index 00000000000..f7a00ecb775 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md @@ -0,0 +1,118 @@ +--- +id: 62a3b5843544ce3a77459c27 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +For now, you want the player to start with just the `stick`. Change the `inventory` array to have `stick` as its only value. + +# --hints-- + +Your `inventory` variable should still be an array. + +```js +assert.isArray(inventory); +``` + +Your `inventory` variable should only have one value. + +```js +assert.lengthOf(inventory, 1); +``` + +Your `inventory` variable should include the string `stick`. + +```js +assert.include(inventory, "stick"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +--fcc-editable-region-- +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick", "dagger", "sword"]; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md new file mode 100644 index 00000000000..af9e9e6bf70 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md @@ -0,0 +1,128 @@ +--- +id: 62a3b79d520a7f3d0e25afd6 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +JavaScript interacts with the HTML using the Document Object Model, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the `document` variable, which represents your entire HTML document. + +One method for finding specific elements in your HTML is using the `querySelector()` method. The `querySelector()` method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the `

` element in your HTML, you would write: + +```js +let h1 = document.querySelector("h1"); +``` + +Note that `h1` is a string and matches the CSS selector you would use. Create a `button1` variable and use `querySelector()` to assign it your element with the `id` of `button1`. Remember that CSS `id` selectors are prefixed with a `#`. + +# --hints-- + +You should use `let` to declare a `button1` variable. + +```js +assert.match(code, /let button1/); +``` + +You should use `document.querySelector()`. + +```js +assert.match(code, /document\.querySelector/); +``` + +You should use the `#button1` selector. + +```js +assert.match(code, /querySelector\(('|")#button1\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md new file mode 100644 index 00000000000..0e0eaee9ae7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md @@ -0,0 +1,116 @@ +--- +id: 62a3bb9aeefe4b3fc43c6d7b +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +`button1` is a variable that is not going to be reassigned. If you are not going to assign a new value to a variable, it is best practice to use the `const` keyword to declare it instead of the `let` keyword. This will tell JavaScript to throw an error if you accidentally reassign it. + +Change your `button1` variable to be declared with the `const` keyword. + +# --hints-- + +Your `button1` variable should be declared with `const`. + +```js +assert.match(code, /const button1/); +``` + +Your `button1` variable should still have the value of your `#button1` element. + +```js +assert.deepEqual(button1, document.querySelector("#button1")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +let button1 = document.querySelector("#button1"); +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md new file mode 100644 index 00000000000..065f7587076 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md @@ -0,0 +1,181 @@ +--- +id: 62a3bec30ea7f941412512dc +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Just like you did with the buttons, create variables for the following `id`s and use `querySelector()` to give them the element as a value: + +`text`, `xpText`, `healthText`, `goldText`, `monsterStats`, and `monsterName`. + +Remember to declare these with the `const` keyword, and name the variables to match the `id`s. + +# --hints-- + +You should declare a `text` variable with `const`. + +```js +assert.match(code, /const text/); +``` + +Your `text` variable should have the value of your `#text` element. + +```js +assert.deepEqual(text, document.querySelector('#text')); +``` + +You should declare a `xpText` variable with `const`. + +```js +assert.match(code, /const xpText/); +``` + +Your `xpText` variable should have the value of your `#xpText` element. + +```js +assert.deepEqual(xpText, document.querySelector('#xpText')); +``` + +You should declare a `healthText` variable with `const`. + +```js +assert.match(code, /const healthText/); +``` + +Your `healthText` variable should have the value of your `#healthText` element. + +```js +assert.deepEqual(healthText, document.querySelector('#healthText')); +``` + +You should declare a `goldText` variable with `const`. + +```js +assert.match(code, /const goldText/); +``` + +Your `goldText` variable should have the value of your `#goldText` element. + +```js +assert.deepEqual(goldText, document.querySelector('#goldText')); +``` + +You should declare a `monsterStats` variable with `const`. + +```js +assert.match(code, /const monsterStats/); +``` + +Your `monsterStats` variable should have the value of your `#monsterStats` element. + +```js +assert.deepEqual(monsterStats, document.querySelector('#monsterStats')); +``` + +You should declare a `monsterName` variable with `const`. + +```js +assert.match(code, /const monsterName/); +``` + +Your `monsterName` variable should have the value of your `#monsterName` element. + +```js +assert.deepEqual(monsterName, document.querySelector('#monsterName')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md new file mode 100644 index 00000000000..ed392fd2cc4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md @@ -0,0 +1,134 @@ +--- +id: 62a3c0ab883fd9435cd5c518 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Comments allow you to add notes to your code. In JavaScript, single-line comments can be written with `//` and multi-line comments can be written with `/*` and `*/`. For example, here are single and multi-line comments that say "Hello World": + +```js +// hello world +/* + hello world +*/ +``` + +Add a single-line comment that says `initialize buttons`. + +# --hints-- + +You should use the `//` symbol to start a single-line comment. + +```js +assert.match(code, /\/\//); +``` + +Your comment should have the text `initialize buttons`. + +```js +assert.match(code, /\/\/\s*initialize buttons/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md new file mode 100644 index 00000000000..0f2fe813e63 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md @@ -0,0 +1,134 @@ +--- +id: 62a3c2fccf186146b59c6e96 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +`button1` represents your first `button` element. These elements have a special property called `onclick`, which you can use to determine what happens when someone clicks that button. Properties in JavaScript can be accessed in a couple of ways - the first is with dot notation. Accessing the `onclick` property of a button would look like `button.onclick`. + +Use dot notation to set the `onclick` property of your `button1` to the variable `goStore`. This variable will be something you write later. Note that `button1` is already declared, so you do not need to use `let` or `const`. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button1`. + +```js +assert.match(code, /button1\.onclick/); +``` + +You should not use `let` or `const`. + +```js +assert.notMatch(code, /(let|const)\s+button1\.onclick/); +``` + +You should set the `onclick` property of `button1` to the variable `goStore`. + +```js +assert.match(code, /button1\.onclick\s*=\s*goStore/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- +// initialize buttons + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md new file mode 100644 index 00000000000..73d0dc234d9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md @@ -0,0 +1,151 @@ +--- +id: 62a3c4a0e52767482c5202d4 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Using the same syntax, set the `onclick` properties of `button2` and `button3` to `goCave` and `fightDragon` respectively. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button2`. + +```js +assert.match(code, /button2\.onclick/); +``` + +You should not use `let` or `const` to assign `button2.onclick`. + +```js +assert.notMatch(code, /(let|const)\s+button2\.onclick/); +``` + +You should set the `onclick` property of `button2` to the variable `goCave`. + +```js +assert.match(code, /button2\.onclick\s*=\s*goCave/); +``` + +You should use dot notation to access the `onclick` property of `button3`. + +```js +assert.match(code, /button3\.onclick/); +``` + +You should not use `let` or `const` to assign `button3.onclick`. + +```js +assert.notMatch(code, /(let|const)\s+button3\.onclick/); +``` + +You should set the `onclick` property of `button3` to the variable `fightDragon`. + +```js +assert.match(code, /button3\.onclick\s*=\s*fightDragon/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +--fcc-editable-region-- +// initialize buttons +button1.onclick = goStore; + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md new file mode 100644 index 00000000000..38a51618160 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md @@ -0,0 +1,150 @@ +--- +id: 62a3c668afc43b4a134cca81 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Functions are special tools that allow you to run sections of code at specific times. You can declare functions using the `function` keyword. Here is an example of a function called `functionName` - note the opening and closing curly braces. These indicate the section of code that is within the function. + +```js +function functionName() { + +} +``` + +Create an empty function named `goStore`. This will match the `goStore` variable you used earlier. + +# --hints-- + +You should declare `goStore` with the `function` keyword. + +```js +assert.match(code, /function\s*goStore()/); +``` + +`goStore` should be defined. + +```js +assert.isDefined(goStore); +``` + +`goStore` should be a function. + +```js +assert.isFunction(goStore); +``` + +`goStore` should be an empty function. + +```js +assert.equal(goStore.toString(), "function goStore() {}"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md new file mode 100644 index 00000000000..7bec654ec15 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md @@ -0,0 +1,138 @@ +--- +id: 62a3c8bf3980c14c438d2aed +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message "Hello World". + +```js +function functionName() { + console.log("Hello World"); +} +``` + +# --hints-- + +You should have a `console.log("Going to store.");` line in your code. Don't forget the semi-colon. + +```js +assert.match(code, /console\.log\(('|")Going to store\.\1\);/); +``` + +Your `console.log("Going to store.");` line should be in your `goStore` function. + +```js +assert.match(goStore.toString(), /console\.log\(('|")Going to store\.\1\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md new file mode 100644 index 00000000000..a911182a57c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md @@ -0,0 +1,146 @@ +--- +id: 62a3c91a2bab1b4d6fabb726 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Now create a `goCave` function that prints `Going to cave.` to the console. + +# --hints-- + +You should use the `function` keyword to declare `goCave`. + +```js +assert.match(code, /function goCave/); +``` + +`goCave` should be a function. + +```js +assert.isFunction(goCave); +``` + +You should have a `console.log("Going to cave.");` line in your code. + +```js +assert.match(code, /console.log\(('|")Going to cave\.\1\)/); +``` + +Your `console.log("Going to cave.");` line should be inside your `goCave` function. + +```js +assert.match(goCave.toString(), /console.log\(('|")Going to cave\.\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + console.log("Going to store."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md new file mode 100644 index 00000000000..c14f5a7d858 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md @@ -0,0 +1,152 @@ +--- +id: 62a3cdb11478a34ff4a6470d +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Now create a `fightDragon` function that prints `Fighting dragon.` to the console. + +Once you have done that, open your console and try clicking the buttons on your project. + +# --hints-- + +You should use the `function` keyword to declare `fightDragon`. + +```js +assert.match(code, /function fightDragon/); +``` + +`fightDragon` should be a function. + +```js +assert.isFunction(fightDragon); +``` + +You should have a `console.log("Fighting dragon.");` line in your code. + +```js +assert.match(code, /console.log\(('|")Fighting dragon\.\1\)/); +``` + +Your `console.log("Fighting dragon.");` line should be inside your `fightDragon` function. + +```js +assert.match(fightDragon.toString(), /console.log\(('|")Fighting dragon\.\1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + console.log("Going to store."); +} + +function goCave() { + console.log("Going to cave."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md new file mode 100644 index 00000000000..490ea3e8e2f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md @@ -0,0 +1,164 @@ +--- +id: 62a3cfc8328d3351b95d4f61 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +The `innerText` property controls the text that appears in an HTML element. For example: + +```js +const info = document.querySelector("#info"); +info.innerText = "Hello World"; +``` + +This code would change the element assigned to the `div` variable to have the text `Hello World`. + +When a player clicks your `Go to store` button, you want to change the buttons and text. Remove the code inside the `goStore` function and add a line that updates the text of `button1` to say `Buy 10 health (10 gold)`. + +# --hints-- + +You should not have a `console.log("Going to store.");` line in your code. + +```js +assert.notMatch(code, /console.log\(('|")Going to store\.\1\)/); +``` + +You should use dot notation to access the `innerText` property of `button1`. + +```js +assert.match(code, /button1\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button1`. + +```js +assert.notMatch(code, /(let|const)\s+button1.innerText/); +``` + +You should update the `innerText` property of `button1` to be `Buy 10 health (10 gold)`. + +```js +assert.match(code, /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + border: 1px solid black; + padding: 5px; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + console.log("Going to store."); +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md new file mode 100644 index 00000000000..8d5c8d1245f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md @@ -0,0 +1,176 @@ +--- +id: 62a7beb1ad61211ac153707f +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now add a line that updates the text of `button2` to say `Buy weapon (30 gold)` and update the text of `button3` to say `Go to town square`. + +# --hints-- + +You should use dot notation to access the `innerText` property of `button2`. + +```js +assert.match(code, /button2\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button2`. + +```js +assert.notMatch(code, /(let|const)\s+button2.innerText/); +``` + +You should update the `innerText` property of `button2` to be `Buy weapon (30 gold)`. + +```js +assert.match(code, /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/); +``` + +You should use dot notation to access the `innerText` property of `button3`. + +```js +assert.match(code, /button3\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `button3`. + +```js +assert.notMatch(code, /(let|const)\s+button3.innerText/); +``` + +You should update the `innerText` property of `button3` to be `Go to town square`. + +```js +assert.match(code, /button3\.innerText\s*=\s*('|")Go to town square\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /button3\.innerText\s*=\s*('|")Go to town square\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md new file mode 100644 index 00000000000..981e39344f7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md @@ -0,0 +1,202 @@ +--- +id: 62a7bf06d2ad9d1c5024e833 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +You will also need to update the functions that run when the buttons are clicked. Update the `onclick` property for each button to run `buyHealth`, `buyWeapon`, and `goTown`, respectively. + +# --hints-- + +You should use dot notation to access the `onclick` property of `button1`. + +```js +assert.match(code, /button1\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button1`. + +```js +assert.notMatch(code, /(let|const)\s+button1.onclick/); +``` + +You should set the `onclick` property of `button1` to be `buyHealth`. + +```js +assert.match(code, /button1\.onclick\s*=\s*buyHealth/); +``` + +You should set the `onclick` property of `button1` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button1\.onclick\s*=\s*buyHealth/); +``` + +You should use dot notation to access the `onclick` property of `button2`. + +```js +assert.match(code, /button2\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button2`. + +```js +assert.notMatch(code, /(let|const)\s+button2.onclick/); +``` + +You should set the `onclick` property of `button2` to be `buyWeapon`. + +```js +assert.match(code, /button2\.onclick\s*=\s*buyWeapon/); +``` + +You should set the `onclick` property of `button2` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button2\.onclick\s*=\s*buyWeapon/); +``` + +You should use dot notation to access the `onclick` property of `button3`. + +```js +assert.match(code, /button3\.onclick/); +``` + +You should not use `let` or `const` to access the `onclick` property of `button3`. + +```js +assert.notMatch(code, /(let|const)\s+button3.onclick/); +``` + +You should set the `onclick` property of `button3` to be `goTown`. + +```js +assert.match(code, /button3\.onclick\s*=\s*goTown/); +``` + +You should set the `onclick` property of `button3` in your `goStore` function. + +```js +assert.match(goStore.toString(), /button3\.onclick\s*=\s*goTown/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md new file mode 100644 index 00000000000..eed48a208c4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md @@ -0,0 +1,157 @@ +--- +id: 62a7bfabe119461eb13ccbd6 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Now you need to modify your display text. Change the `innerText` of the `text` to be `You enter the store.`. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text`. + +```js +assert.match(code, /text\.innerText/); +``` + +You should not use `let` or `const` to access the `innerText` property of `text`. + +```js +assert.notMatch(code, /(let|const)\s+text.innerText/); +``` + +You should update the `innerText` property of `text` to be `You enter the store.`. + +```js +assert.match(code, /text\.innerText\s*=\s*('|")You enter the store.\1/); +``` + +You should update the `innerText` property within your `goStore` function. + +```js +assert.match(goStore.toString(), /text\.innerText\s*=\s*('|")You enter the store.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md new file mode 100644 index 00000000000..ae7d6df92f7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md @@ -0,0 +1,172 @@ +--- +id: 62a7bfd9179b7f1f6a15fb1e +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Create three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`. + +# --hints-- + +You should declare `buyHealth` with the `function` keyword. + +```js +assert.match(code, /function buyHealth/); +``` + +You should declare `buyWeapon` with the `function` keyword. + +```js +assert.match(code, /function buyWeapon/); +``` + +You should declare `goTown` with the `function` keyword. + +```js +assert.match(code, /function goTown/); +``` + +`buyHealth` should be an empty function. + +```js +assert.equal(buyHealth.toString(), 'function buyHealth() {}'); +``` + +`buyWeapon` should be an empty function. + +```js +assert.equal(buyWeapon.toString(), 'function buyWeapon() {}'); +``` + +`goTown` should be an empty function. + +```js +assert.equal(goTown.toString(), 'function goTown() {}'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md new file mode 100644 index 00000000000..b985f7eded3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md @@ -0,0 +1,162 @@ +--- +id: 62a7c011eef9fb2084b966db +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Move your `goTown` function above your `goStore` function. Then copy and paste the contents of the `goStore` function into the `goTown` function. + +# --hints-- + +Your `goTown` function should come before your `goStore` function. + +```js +const goTown = code.split(" ").indexOf("goTown()"); +const goStore = code.split(" ").indexOf("goStore()"); +assert.isBelow(goTown, goStore); +``` + +Your `goTown` function should have the same contents as your `goStore` function. + +```js +const goTownString = goTown.toString().replace("goTown", ""); +const goStoreString = goStore.toString().replace("goStore", ""); +assert.equal(goTownString, goStoreString); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function goTown() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md new file mode 100644 index 00000000000..20ac473611a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md @@ -0,0 +1,194 @@ +--- +id: 62a7c071219da921758a35bb +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +In your `goTown` function, update your button `innerText` properties to be `Go to store`, `Go to cave`, and `Fight dragon`. Update your `onclick` properties to be `goStore`, `goCave`, and `fightDragon`, respectively. Finally, update your text's `innerText` property to be `You are in the town square. You see a sign that says Store.`. + +# --hints-- + +You should set the `button1.innerText` property to be `Go to store` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/); +``` + +You should set the `button2.innerText` property to be `Go to cave` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/); +``` + +You should set the `button3.innerText` property to be `Fight dragon` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/); +``` + +You should set the `button1.onclick` property to be `goStore` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button1\.onclick\s*=\s*goStore/); +``` + +You should set the `button2.onclick` property to be `goCave` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button2\.onclick\s*=\s*goCave/); +``` + +You should set the `button3.onclick` property to be `fightDragon` in your `goTown` function. + +```js +assert.match(goTown.toString(), /button3\.onclick\s*=\s*fightDragon/); +``` + +You should set the `text.innerText` property to be `You are in the town square. You see a sign that says Store.` in your `goTown` function. + +```js +assert.match(goTown.toString(), /text\.innerText\s*=\s*('|")You are in the town square. You see a sign that says Store\.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goTown() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md new file mode 100644 index 00000000000..6b26d69619b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md @@ -0,0 +1,164 @@ +--- +id: 62a7c23e6b511f22ed71197a +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You need to wrap the text `Store` in double quotes. Because your string is already wrapped in double quotes, you'll need to escape the quotes around `Store`. You can escape them with a backslash `\`. Here is an example: + +```js +const escapedString = "Naomi likes to play \"Zelda\" sometimes."; +``` + +Wrap the text `Store` in double quotes within your `text.innerText` line. + +# --hints-- + +You should wrap the text `Store` in double quotes. + +```js +assert.match(goTown.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"."/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says Store."; +} +--fcc-editable-region-- + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md new file mode 100644 index 00000000000..82ae722f3d8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md @@ -0,0 +1,180 @@ +--- +id: 62a7cc99577fbf25ee7a7d76 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +You have repetition in the `goTown` and `goStore` functions. When you have repetition in your code, this is a sign that you need another function. Functions can take parameters, which are values that are given to the function each time it is run. Here is a function that takes a parameter called `param`: + +```js +function myFunction(param) { + console.log(param); +} +``` + +Create an empty `update` function that takes a parameter called `location`. + +# --hints-- + +You should use the `function` keyword to declare `update`. + +```js +assert.match(code, /function\s+update/); +``` + +Your `update` function should take a parameter called `location`. + +```js +assert.match(update.toString(), /update\(location\)/); +``` + +Your `update` function should be empty. + +```js +assert.equal(update.toString(), function update(location) {}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- + +--fcc-editable-region-- + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md new file mode 100644 index 00000000000..a36f9b9f86e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md @@ -0,0 +1,176 @@ +--- +id: 62a8a929e4260d08093756d2 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Create a variable called `locations` and set it to an empty array. + +# --hints-- + +You should use `const` to declare `locations`. + +```js +assert.match(code, /const locations/); +``` + +`locations` should be an array. + + +```js +assert.isArray(locations); +``` + +`locations` should be empty. + +```js +assert.equal(locations.length, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- + +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md new file mode 100644 index 00000000000..4f9143c205b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md @@ -0,0 +1,171 @@ +--- +id: 62a8a9d876b2580943ba9351 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You previously used an array to store strings. But arrays can store any data type. This time, your array will be storing objects. Objects are similar to arrays, but with a few differences. One difference is that objects use properties, or keys, to access and modify data. + +Objects are indicated by curly braces. An empty object would look like `{}`. Add an empty object to your `locations` array. + +# --hints-- + +Your first value of `locations` should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first value of `locations` should be an empty object. + +```js +assert.deepEqual(locations[0], {}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = []; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md new file mode 100644 index 00000000000..d5c3664e5ed --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md @@ -0,0 +1,187 @@ +--- +id: 62a8aa98a8289d0a698eee1d +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Object properties are written as `key: value` pairs, where `key` is the name of the property (or the key), and `value` is the value that property holds. For example, here is an object with a key of `name` set to `Quincy Larson`. + +```js +{ + name: "Quincy Larson" +} +``` + +Add a `name` property to your empty object and give it a value of `town square`. + +# --hints-- + +Your first value of `locations` should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first value of `locations` should have a `name` property. + +```js +assert.isDefined(locations[0].name); +``` + +Your first value of `locations` should have a `name` property with a value of `town square`. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md new file mode 100644 index 00000000000..45578691077 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md @@ -0,0 +1,200 @@ +--- +id: 62a8ab0e27cbaf0b54ba8a42 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Just like array values, object properties are separated by a comma. Add a comma after your `name` property and add a `button text` property with the value of an empty array. Note that because the property name has more than one word, you'll need to surround it in quotes. + +For example: + +```js +{ + name: "Naomi", + "favorite color": "purple" +} +``` + +# --hints-- + +Your first `locations` value should be an object. + +```js +assert.isObject(locations[0]); +``` + +Your first `locations` value should have a `button text` property. + +```js +assert.isDefined(locations[0]["button text"]); +``` + +Your first `locations` value should have a `button text` property with a value that is an array. + +```js +assert.isArray(locations[0]["button text"]); +``` + +Your first `locations` value should have a `button text` property with a value that is an empty array. + +```js +assert.equal(locations[0]["button text"].length, 0); +``` + +You should not remove or change the `name` property. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square" + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md new file mode 100644 index 00000000000..5a1412cf312 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md @@ -0,0 +1,194 @@ +--- +id: 62a8ac194679e60cb561b0a8 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give your empty `button text` array three string elements. Use the three strings being assigned to the button `innerText` properties in the `goTown` function. Remember that array values are separated by commas. + +# --hints-- + +Your `button text` array should have three elements. + +```js +assert.lengthOf(locations[0]["button text"], 3); +``` + +Your `button text` array should have three strings. + +```js +assert.isString(locations[0]["button text"][0]); +assert.isString(locations[0]["button text"][1]); +assert.isString(locations[0]["button text"][2]); +``` + +The first value in the `button text` array should be "Go to store". + +```js +assert.equal(locations[0]["button text"][0], "Go to store"); +``` + +The second value in the `button text` array should be "Go to cave". + +```js +assert.equal(locations[0]["button text"][1], "Go to cave"); +``` + +The third value in the `button text` array should be "Fight dragon". + +```js +assert.equal(locations[0]["button text"][2], "Fight dragon"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": [] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md new file mode 100644 index 00000000000..1229366bb3a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md @@ -0,0 +1,198 @@ +--- +id: 62a8ad8e01d7cb0deae5ec66 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Create another property in your object called `button functions`. Give this property an array containing the three functions assigned to the `onclick` properties in the `goTown` function. Remember that these functions are variables, not strings, and should not be wrapped in quotes. + +# --hints-- + +Your first `locations` object should have a `button functions` property. + +```js +assert.isDefined(locations[0]["button functions"]); +``` + +Your `button functions` property should be an array. + +```js +assert.isArray(locations[0]["button functions"]); +``` + +Your `button functions` property should have three values in it. + +```js +assert.lengthOf(locations[0]["button functions"], 3); +``` + +Your first `button functions` array value should be the function `goStore`. + +```js +assert.equal(locations[0]["button functions"][0], goStore); +``` + +Your second `button functions` array value should be the function `goCave`. + +```js +assert.equal(locations[0]["button functions"][1], goCave); +``` + +Your third `button functions` array value should be the function `fightDragon`. + +```js +assert.equal(locations[0]["button functions"][2], fightDragon); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md new file mode 100644 index 00000000000..7ac20d72a3e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md @@ -0,0 +1,181 @@ +--- +id: 62a8ade9b2f5b30ef0b606c2 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Add one final property to the object named `text`. Give this property the final `text.innerText` value from the `goTown` function. + +# --hints-- + +Your first `locations` value should have a `text` property. + +```js +assert.isDefined(locations[0]["text"]); +``` + +Your `text` property should be a string. + +```js +assert.isString(locations[0]["text"]); +``` + +Your `text` property should have the value `You are in the town square. You see a sign that says \"Store\".` + +```js +assert.equal(locations[0]["text"], "You are in the town square. You see a sign that says \"Store\"."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md new file mode 100644 index 00000000000..79d6d140e1e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md @@ -0,0 +1,235 @@ +--- +id: 62a8ae85fcaedc0fddc7ca4f +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Add a second object to your `locations` array (remember to separate them with a comma). Following the pattern you used in the first object, create the same properties but use the values from the `goStore` function. Set the `name` property to `store`. + +# --hints-- + +Your `locations` array should have two values. + +```js +assert.lengthOf(locations, 2); +``` + +Both `locations` values should be objects. + + +```js +assert.isObject(locations[0]); +assert.isObject(locations[1]); +``` + +Your second `locations` object should have a `name` property with the value of `store`. + +```js +assert.equal(locations[1].name, "store"); +``` + +Your second `locations` object should have a `button text` property which is an array. + +```js +assert.isArray(locations[1]["button text"]); +``` + +Your `button text` property should have the string values `Buy 10 health (10 gold)`, `Buy weapon (30 gold)`, and `Go to town square`. + +```js +assert.equal(locations[1]["button text"][0], "Buy 10 health (10 gold)"); +assert.equal(locations[1]["button text"][1], "Buy weapon (30 gold)"); +assert.equal(locations[1]["button text"][2], "Go to town square"); +``` + +Your second `locations` object should have a `button functions` property which is an array. + +```js +assert.isArray(locations[1]["button functions"]); +``` + +Your `button functions` property should have the function values `buyHealth`, `buyWeapon`, and `goTown`. + +```js +assert.equal(locations[1]["button functions"][0], buyHealth); +assert.equal(locations[1]["button functions"][1], buyWeapon); +assert.equal(locations[1]["button functions"][2], goTown); +``` + +Your second `locations` object should have a `text` property which is a string. + +```js +assert.isString(locations[1].text); +``` + +Your second `locations` object should have a `text` property with the value of `You enter the store.`. + +```js +assert.equal(locations[1].text, "You enter the store."); +``` + +You should not modify the first `locations` object. + +```js +assert.deepEqual(locations[0], { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." +}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md new file mode 100644 index 00000000000..c60cf5907da --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md @@ -0,0 +1,224 @@ +--- +id: 62a8b0b5053f16111b0b6b5f +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Now you can consolidate some of your code. Start by copying the code from inside the `goTown` function and paste it into your `update` function. Then, remove all the code from inside the `goTown` and `goStore` functions. + +# --hints-- + +Your `update` function should set `button1.innerText` to `Go to store`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/); +``` + +Your `update` function should set `button2.innerText` to `Go to cave`. + +```js +assert.match(update.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/); +``` + +Your `update` function should set `button3.innerText` to `Fight dragon`. + +```js +assert.match(update.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/); +``` + +Your `update` function should set `button1.onclick` to `goStore`. + +```js +assert.match(update.toString(), /button1\.onclick\s*=\s*goStore/); +``` + +Your `update` function should set `button2.onclick` to `goCave`. + +```js +assert.match(update.toString(), /button2\.onclick\s*=\s*goCave/); +``` + +Your `update` function should set `button3.onclick` to `fightDragon`. + +```js +assert.match(update.toString(), /button3\.onclick\s*=\s*fightDragon/); +``` + +Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says "Store".`. + +```js +assert.match(update.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"\."/); +``` + +Your `goTown` function should be empty. + +```js +assert.match(goTown.toString(), /function goTown\(\) \{\}/); +``` + +Your `goStore` function should be empty. + +```js +assert.match(goStore.toString(), /function goStore\(\) \{\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md new file mode 100644 index 00000000000..450bc66c133 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md @@ -0,0 +1,176 @@ +--- +id: 62a8b1762b7775124622e1a3 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Instead of assigning the `innerText` and `onclick` properties to specific strings and functions, the `update` function will use data from the `location` that is passed into it. First, that data needs to be passed. Inside the `goTown` function, call the `update` function. Here is an example of calling a function named `myFunction`: `myFunction();`. + +# --hints-- + +You should call the `update` function in the `goTown` function. + +```js +assert.match(goTown.toString(), /update\(\)/); +``` + +Don't forget your ending semi-colon. + +```js +assert.match(goTown.toString(), /update\(\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md new file mode 100644 index 00000000000..4d5aa1df9b9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md @@ -0,0 +1,170 @@ +--- +id: 62a8b3cc436db8139cc5fc09 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +You now need to pass the `location` argument into the `update` call. You pass arguments by including them within the parentheses of the function call. For example, calling `myFunction` with an `arg` argument would look like: `myFunction(arg)`. Pass your `locations` array into the `update` call. + +# --hints-- + +You should pass the `locations` array into the `update` call. + +```js +assert.match(goTown.toString(), /update\(locations\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md new file mode 100644 index 00000000000..a8bef26a706 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md @@ -0,0 +1,190 @@ +--- +id: 62a8b6536156c51500739b41 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +The `locations` array contains two locations: the town square and the store. Currently you are passing that entire array into the update functions. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. + +This is called bracket notation. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array. + +# --hints-- + +You should use bracket notation with `locations`. + +```js +assert.match(code, /locations\[/); +``` + +You should access the first object in the `locations` array. Remember that arrays are zero-based. + +```js +assert.match(code, /locations\[0\]/); +``` + +You should pass the first object in the `locations` array into the `update` function. + +```js +assert.match(code, /update\(locations\[0\]\);/); +``` + +This call should still be in your `goTown()` function. + +```js +assert.match(goTown.toString(), /update\(locations\[0\]\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(locations); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md new file mode 100644 index 00000000000..8a6a5c5c67a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md @@ -0,0 +1,176 @@ +--- +id: 62a8b711ab7a12161c7d9b67 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Now your `update` function needs to use the argument you pass into it. Inside the `update` function, change the `button1.innerText` assignment to be `location["button text"]`. That uses bracket notation to get the `button text` property of the `location` object passed into the function. + +# --hints-- + +Your `update` function should use bracket notation to get the `button text` property of the `location` object passed into the function. + +```js +assert.match(update.toString(), /location[('|")button text\1]/); +``` + +You should assign the value of the `button text` property of the `location` object to the `innerText` property of `button1`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md new file mode 100644 index 00000000000..ab4856b1c26 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md @@ -0,0 +1,176 @@ +--- +id: 62a8b9770050d217d2247801 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +`location["button text"]` is an array with three elements. Change the `button1.innerText` assignment to be the first element of that array instead. + +# --hints-- + +You should access the first element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[0\]/); +``` + +You should set the `button1.innerText` property to be the first element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]\[0\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md new file mode 100644 index 00000000000..458368c6e11 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md @@ -0,0 +1,188 @@ +--- +id: 62a8c0c8313e891a15ec23e7 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Now update `button2.innerText` and `button3.innerText` to be assigned the second and third values of the `button text` array, respectively. + +# --hints-- + +You should access the second element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[1\]/); +``` + +You should set the `button2.innerText` property to be the second element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button2\.innerText\s*=\s*location\[('|")button text\1\]\[1\]/); +``` + +You should access the third element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[2\]/); +``` + +You should set the `button3.innerText` property to be the third element of the `button text` property of the `location` argument. + +```js +assert.match(update.toString(), /button3\.innerText\s*=\s*location\[('|")button text\1\]\[2\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md new file mode 100644 index 00000000000..4731c369e1e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md @@ -0,0 +1,200 @@ +--- +id: 62a8c1154d3ae11aee80353f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Following the same pattern as you did for the button text, update the three buttons' `onclick` assignments to be the first, second, and third values of the `button functions` array. + +# --hints-- + +You should access the first element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[0\]/); +``` + +You should set the `button1.onclick` property to be the second element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button1\.onclick\s*=\s*location\[('|")button functions\1\]\[0\]/); +``` + +You should access the second element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[1\]/); +``` + +You should set the `button2.onclick` property to be the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button2\.onclick\s*=\s*location\[('|")button functions\1\]\[1\]/); +``` + +You should access the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /location\[('|")button functions\1\]\[2\]/); +``` + +You should set the `button3.onclick` property to be the third element of the `button functions` property of the `location` argument. + +```js +assert.match(update.toString(), /button3\.onclick\s*=\s*location\[('|")button functions\1\]\[2\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store.\""; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md new file mode 100644 index 00000000000..ca8a532ec15 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md @@ -0,0 +1,176 @@ +--- +id: 62a8c151b23bf21bc7c4fcba +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Finally, update the `text.innerText` assignment to equal the `text` from the location object. However, instead of using bracket notation, use dot notation. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`. + +# --hints-- + +You should use dot notation to access the `text` property of the `location` object. + +```js +assert.match(update.toString(), /location\.text/); +``` + +You should set the `text.innerText` property to be the `text` property of the `location` object. + +```js +assert.match(update.toString(), /text\.innerText\s*=\s*location\.text/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md new file mode 100644 index 00000000000..422ff092c3e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md @@ -0,0 +1,178 @@ +--- +id: 62a8c173949f851c83c64756 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Now update your `goStore` function to call the `update` function. Pass the second element of the `locations` array as your argument. + +To make sure your refactoring is correct, try clicking your first button again. You should see the same changes to your webpage that you saw earlier. + +# --hints-- + +Your `goStore` function should call the `update` function. + +```js +assert.match(goStore.toString(), /update\(/); +``` + +Your `goStore` function should pass the second element of the `locations` array as your argument to `update()`. + +```js +assert.match(goStore.toString(), /update\(locations\[1\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +--fcc-editable-region-- +function goStore() { + +} +--fcc-editable-region-- + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md new file mode 100644 index 00000000000..d7800eb4dce --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md @@ -0,0 +1,190 @@ +--- +id: 62a8c242b25a531f2909e5bc +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Create two more empty functions named `fightSlime` and `fightBeast`. These functions will be used in your upcoming `cave` object. + +# --hints-- + +`fightSlime` should be a function. + +```js +assert.isFunction(fightSlime); +``` + +`fightBeast` should be a function. + +```js +assert.isFunction(fightBeast); +``` + +`fightSlime` should be empty. + +```js +assert.match(fightSlime.toString(), /function fightSlime\(\) \{\}/); +``` + +`fightBeast` should be empty. + +```js +assert.match(fightBeast.toString(), /function fightBeast\(\) \{\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md new file mode 100644 index 00000000000..d96b10aaff6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md @@ -0,0 +1,234 @@ +--- +id: 62a8c2bbbd8aa82052f47c53 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Add a third object to the `locations` array. Give it the same properties as the other two objects. + +Set `name` to `cave`. Set `button text` to an array with the strings `Fight slime`, `Fight fanged beast`, and `Go to town square`. Set the `button functions` to an array with the variables `fightSlime`, `fightBeast`, and `goTown`. Set the `text` property to `You enter the cave. You see some monsters.`. + +# --hints-- + +You should have three values in your `locations` array. + +```js +console.log(locations); +assert.lengthOf(locations, 3); +``` + +Your third `locations` value should be an object. + +```js +assert.isObject(locations[2]); +``` + +Your third `locations` object should have a `name` property with the value of `cave`. + +```js +assert.equal(locations[2].name, "cave"); +``` + +Your third `locations` object should have a `button text` property which is an array. + +```js +assert.isArray(locations[2]["button text"]); +``` + +Your `button text` property should have the string values `Fight slime`, `Fight fanged beast`, and `Go to town square`. + +```js +assert.equal(locations[2]["button text"][0], "Fight slime"); +assert.equal(locations[2]["button text"][1], "Fight fanged beast"); +assert.equal(locations[2]["button text"][2], "Go to town square"); +``` + +Your third `locations` object should have a `button functions` property which is an array. + +```js +assert.isArray(locations[2]["button functions"]); +``` + +Your `button functions` property should have the function values `fightSlime`, `fightBeast`, and `goTown`. + +```js +assert.equal(locations[2]["button functions"][0], fightSlime); +assert.equal(locations[2]["button functions"][1], fightBeast); +assert.equal(locations[2]["button functions"][2], goTown); +``` + +Your third `locations` object should have a `text` property which is a string. + +```js +assert.isString(locations[2].text); +``` + +Your third `locations` object should have a `text` property with the value of `You enter the cave. You see some monsters.`. + +```js +assert.equal(locations[2].text, "You enter the cave. You see some monsters."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, +--fcc-editable-region-- + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md new file mode 100644 index 00000000000..1d663fa1670 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md @@ -0,0 +1,204 @@ +--- +id: 62a8c31ec0ec78216a1c36a0 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Now that you have a `cave` location object, update your `goCave` function to call `update` and pass that new `cave` location. Remember that this is the third element in your `locations` array. + +Don't forget to remove your `console.log` call! + +# --hints-- + +You should use bracket notation to access the third element in your `locations` array. + +```js +assert.match(code, /locations\[2\]/); +``` + +You should pass the third element in your `locations` array to `update`. + +```js +assert.match(code, /update\(locations\[2\]\)/); +``` + +You should call `update` with the third element in your `locations` array in your `goCave` function. + +```js +assert.match(goCave.toString(), /update\(locations\[2\]\)/); +``` + +You should not have the `console.log` statement in your `goCave` function. + +```js +assert.notMatch(goCave.toString(), /console\.log/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +--fcc-editable-region-- +function goCave() { + console.log("Going to cave."); +} +--fcc-editable-region-- + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md new file mode 100644 index 00000000000..4d33b655a6b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md @@ -0,0 +1,194 @@ +--- +id: 62a8c370ad8c68227137e0bc +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Now that your `store` and `cave` locations are complete, you can code the actions the player takes at those locations. Inside the `buyHealth` function, set `gold` equal to `gold` minus `10`. + +For example, here is how you would set `num` equal to `5` less than `num`: `num = num - 5;`. + +# --hints-- + +You should subtract `10` from `gold`. + +```js +assert.match(code, /gold\s*=\s*gold\s*-\s*10/); +``` + +Your `buyHealth` function should reduce `gold` by `10`. + +```js +gold = 10; +buyHealth(); +assert.equal(gold, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md new file mode 100644 index 00000000000..df1d38ffce5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md @@ -0,0 +1,192 @@ +--- +id: 62a8c3ebc6c35e23785e1a19 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +After the `gold` is updated, add a line to set `health` equal to `health` plus `10`. + +# --hints-- + +You should add `10` to `health`. + +```js +assert.match(code, /health\s*=\s*health\s*\+\s*10/); +``` + +Your `buyHealth` function should increase `health` by `10`. + +```js +health = 10; +buyHealth(); +assert.equal(health, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold = gold - 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md new file mode 100644 index 00000000000..a5bb57d211c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md @@ -0,0 +1,203 @@ +--- +id: 62a8c41ecaf1bd24536129b8 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +There is a shorthand way to add or subtract from a variable called compound assignment. For example, changing `num = num + 5` to compound assignment would look like `num += 5`. + +Update both lines inside your `buyHealth` function to use compound assignment. + +# --hints-- + +You should change `gold` to use compound assignment. + +```js +assert.notMatch(code, /gold\s*=\s*gold\s*-\s*10/); +``` + +You should change `health` to use compound assignment. + +```js +assert.notMatch(code, /health\s*=\s*health\s*\+\s*10/); +``` + +Your `buyHealth` function should still update the values. + +```js +gold = 10; +health = 10; +buyHealth(); +assert.equal(gold, 0); +assert.equal(health, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold = gold - 10; + health = health + 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md new file mode 100644 index 00000000000..70e928a9bd6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md @@ -0,0 +1,207 @@ +--- +id: 62a8c465fa7b0c252f4a8f0c +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Now that you are updating the `gold` and `health` variables, you need to display those new values on the game screen. After your assignment lines, assign the `innerText` property of `goldText` to be the variable `gold`. Use the same pattern to update `healthText` with the `health` variable. + +Here is an example: + +```js +let value = 100; +const total = document.querySelector('#total'); +total.innerText = value; +``` + +You can test this by clicking your "Go to store" button, followed by your "Buy Health" button. + +# --hints-- + +Your `buyHealth` function should update the text of `healthText` to be the value of `health`. + +```js +health = 10; +buyHealth(); +const target = document.querySelector('#healthText'); +assert.equal(target.innerText, '20'); +``` + +Your `buyHealth` function should update the text of `goldText` to be the value of `gold`. + +```js +gold = 10; +buyHealth(); +const target = document.querySelector('#goldText'); +assert.equal(target.innerText, '0'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold -= 10; + health += 10; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md new file mode 100644 index 00000000000..89161b6c20f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md @@ -0,0 +1,209 @@ +--- +id: 62a8c4db0710f3260f867a92 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +What if the player doesn't have enough gold to buy health? When you want to run code conditionally, you can use the `if` statement. Put all of the code in your `buyHealth` function inside an `if` statement. For example: + +```js +function myFunction() { + if ("condition") { + console.log("Hello World!"); + } +} +``` + +For now, follow that pattern to use a string `condition` inside your `if` statement. + +# --hints-- + +Your `buyHealth` function should have an `if` statement. + +```js +assert.match(buyHealth.toString(), /if/); +``` + +Your `if` statement should have the string `condition` for the condition. + +```js +assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)/); +``` + +All of your `buyHealth` code should be inside the `if` statement. + +```js +assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)\s*\{[\s\S]*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md new file mode 100644 index 00000000000..e68eacaf744 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md @@ -0,0 +1,221 @@ +--- +id: 62a8c56247609626fa4a8d6e +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +The `condition` string is just a placeholder. Change the `if` statement condition to check if `gold` is greater than or equal to `10`. + +Here is an `if` statement that checks if `num` is greater than or equal to `5`: + +```js +if (num >= 5) { + +} +``` + +# --hints-- + +Your `if` statement should check if `gold` is greater than or equal to `10`. + +```js +assert.match(buyHealth.toString(), /if\s*\(gold\s*>=\s*10\)/); +``` + +Your `buyHealth` function should update `health` and `gold` if `gold` is greater than or equal to `10`. + +```js +gold = 10; +health = 10; +buyHealth(); +assert.equal(health, 20); +assert.equal(gold, 0); +const healthElement = document.getElementById('healthText'); +assert.equal(healthElement.innerText, '20'); +const goldElement = document.getElementById('goldText'); +assert.equal(goldElement.innerText, '0'); +``` + +Your `buyHealth` function should not update `health` and `gold` if `gold` is less than `10`. + +```js +gold = 5; +health = 10; +buyHealth(); +assert.equal(health, 10); +assert.equal(gold, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if ("condition") { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md new file mode 100644 index 00000000000..d29d4fa92c7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md @@ -0,0 +1,206 @@ +--- +id: 62a8c5db7888af27af23f0dd +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Now when a player tries to buy health it will only work if they have enough money. If they do not, nothing will happen. Add an `else` statement where you can put code to run if a player does not have enough money. + +Here is an example of an empty `else` statement: + +```js +if (num >= 5) { + +} else { + +} +``` + +# --hints-- + +Your `buyHealth` function should have an `else` statement. + +```js +assert.match(buyHealth.toString(), /else/); +``` + +Your `else` statement should come after your `if` statement. + +```js +const split = buyHealth.toString().split(/\s/); +assert.isAbove(split.indexOf('else'), split.indexOf('if')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md new file mode 100644 index 00000000000..3ef17db2434 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md @@ -0,0 +1,200 @@ +--- +id: 62a8c65b75664c28a8e59c16 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Inside the `else` statement, set `text.innerText` to equal `You do not have enough gold to buy health.`. + +# --hints-- + +Your `buyHealth` function should set `text.innerText` to equal `You do not have enough gold to buy health.`. + +```js +assert.match(buyHealth.toString(), /text\.innerText\s*=\s*('|")You do not have enough gold to buy health\.\1/); +``` + +Your `buyHealth` function should update `text.innerText` when `gold` is less than `10`. + +```js +gold = 5; +health = 10; +buyHealth(); +assert.equal(text.innerText, 'You do not have enough gold to buy health.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + + } +} +--fcc-editable-region-- + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md new file mode 100644 index 00000000000..90b8c75c72f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md @@ -0,0 +1,204 @@ +--- +id: 62a8c6815f5f1a29735efe1b +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Use `const` to create a `weapons` variable above your `locations` array. Assign it an empty array. + +# --hints-- + +You should use `const` to declare your `weapons` variable. + +```js +assert.match(code, /const weapons/i); +``` + +Your `weapons` variable should be an array. + +```js +assert.isArray(weapons); +``` + +Your `weapons` variable should be empty. + +```js +assert.equal(weapons.length, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- + +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md new file mode 100644 index 00000000000..bed05c8d88b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md @@ -0,0 +1,229 @@ +--- +id: 62a8c7322e42962ad53ad204 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Just like your `locations` array, your `weapons` array will hold objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should have the `name` set to `stick` and the `power` set to `5`. The second should be `dagger` and `30`. The third, `claw hammer` and `50`. The fourth, `sword` and `100`. + +# --hints-- + +Your `weapons` array should have four values. + +```js +assert.lengthOf(weapons, 4); +``` + +Your `weapons` array should have four objects. + +```js +assert.isObject(weapons[0]); +assert.isObject(weapons[1]); +assert.isObject(weapons[2]); +assert.isObject(weapons[3]); +``` + +Your first `weapons` object should have the `name` set to `stick` and the `power` set to `5`. + +```js +assert.equal(weapons[0].name, 'stick'); +assert.equal(weapons[0].power, 5); +``` + +Your second `weapons` object should have the `name` set to `dagger` and the `power` set to `30`. + +```js +assert.equal(weapons[1].name, 'dagger'); +assert.equal(weapons[1].power, 30); +``` + +Your third `weapons` object should have the `name` set to `claw hammer` and the `power` set to `50`. + +```js +assert.equal(weapons[2].name, 'claw hammer'); +assert.equal(weapons[2].power, 50); +``` + +Your fourth `weapons` object should have the `name` set to `sword` and the `power` set to `100`. + +```js +assert.equal(weapons[3].name, 'sword'); +assert.equal(weapons[3].power, 100); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const weapons = []; +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + +} + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md new file mode 100644 index 00000000000..422e0ad66b5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md @@ -0,0 +1,203 @@ +--- +id: 62a8c7a59e72c02bb1c717d2 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Inside your `buyWeapon` function, add an `if` statement to check if `gold` is greater than or equal to `30`. + +# --hints-- + +Your `buyWeapon` function should have an `if` statement. + +```js +assert.include(buyWeapon.toString(), 'if'); +``` + +Your `if` statement should check if `gold` is greater than or equal to `30`. + +```js +assert.match(buyWeapon.toString(), /if\s*\(gold\s*>=\s*30\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md new file mode 100644 index 00000000000..cded49b4395 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md @@ -0,0 +1,215 @@ +--- +id: 62a8c89e4272512d44fc1c66 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Similar to your `buyHealth` function, set `gold` equal to 30 less than its current value. Make sure this is inside your `if` statement. + +# --hints-- + +You should use compound assignment to subtract `30` from `gold`. + +```js +assert.match(buyWeapon.toString(), /gold\s*-=\s*30/); +``` + +Your `buyWeapon` function should reduce `gold` by `30`. + +```js +gold = 30; +buyWeapon(); +assert.equal(gold, 0); +``` + +Your code should be in your `if` statement. + +```js +gold = 20; +buyWeapon(); +assert.equal(gold, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md new file mode 100644 index 00000000000..7f2575cbb11 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md @@ -0,0 +1,219 @@ +--- +id: 62a8c8cee8e5cf2e001789b4 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +The value of the `currentWeapon` variable corresponds to an index in the `weapons` array. The player starts with a `stick`, since `currentWeapon` starts at `0` and `weapons[0]` is the `stick` weapon. + +In the `buyWeapon` function, add one to `currentWeapon` - the user is buying the next weapon in the `weapons` array. + +# --hints-- + +You should use compound assignment to add one to `currentWeapon`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/); +``` + +Your `buyWeapon` function should increase `currentWeapon` by `1`. + +```js +gold = 30; +currentWeapon = 0; +buyWeapon(); +assert.equal(currentWeapon, 1); +``` + +Your code should be in your `if` statement. + +```js +gold = 20; +currentWeapon = 0; +buyWeapon(); +assert.equal(currentWeapon, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md new file mode 100644 index 00000000000..dbd8006158d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md @@ -0,0 +1,208 @@ +--- +id: 62a8ca22d29fe62f3952bdf5 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Increasing a value by 1, or incrementing, has a special operator in JavaScript: `++`. If you wanted to increase `num` by 1, you could write `num++`. + +Change your `currentWeapon` assignment to use the increment operator. + +# --hints-- + +You should use the increment operator to increase `currentWeapon` by `1`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\+\s*\+/); +``` + +You should not use compound assignment to increase `currentWeapon` by `1`. + +```js +assert.notMatch(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon += 1; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md new file mode 100644 index 00000000000..29c3d761fb0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md @@ -0,0 +1,206 @@ +--- +id: 62a8cb19bd7f8a304e5427a1 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Now update the `goldText` element to display the new value of `gold`, and update the `text` element to display `You now have a new weapon.`. + +# --hints-- + +You should update the `innerText` property of the `goldText` element to be `gold`. + +```js +assert.match(buyWeapon.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should update the `innerText` property of the `text` element to be `You now have a new weapon.`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a new weapon\.\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md new file mode 100644 index 00000000000..d91e6245ebe --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md @@ -0,0 +1,222 @@ +--- +id: 62a8cbd1e3595431d5a2b3f1 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +You should tell the player what weapon they bought. In between the two lines you just wrote, use `let` to initialize a new variable called `newWeapon`. Set this to equal `weapons`. + +# --hints-- + +Your `buyWeapon` function should have a variable named `newWeapon`. + +```js +assert.match(buyWeapon.toString(), /newWeapon/); +``` + +You should use `let` to declare `newWeapon`. + +```js +assert.match(code, /let\s+newWeapon/); +``` + +`newWeapon` should be initialised to have the value of `weapons`. Don't forget your semi-colon. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons;/); +``` + +`newWeapon` should be declared before you modify `text`. + +```js +const contents = buyWeapon.toString().split(/\s+/); +assert.isBelow(contents.indexOf('newWeapon'), contents.indexOf('text.innerText')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyWeapon, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md new file mode 100644 index 00000000000..165962a1920 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md @@ -0,0 +1,211 @@ +--- +id: 62a8cce1b0c32c33017cf2e9 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For your `newWeapon` variable, use bracket notation to use the `currentWeapon` variable to access an object within the `weapons` array. + +When you use a variable in bracket notation, you are accessing the property or index by the *value* of that variable. + +For example, this code uses the `index` variable to access a value of `array`. + +```js +let value = array[index]; +``` + +# --hints-- + +You should update `newWeapon` to have the value of `weapons[currentWeapon]`. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md new file mode 100644 index 00000000000..7165051ad52 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md @@ -0,0 +1,203 @@ +--- +id: 62a8ce1dfc990134162b3bd9 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +`weapons[currentWeapon]` is an object. Use dot notation to get the `name` property of that object. + +# --hints-- + +You should update `newWeapon` to have the value of `weapons[currentWeapon].name`. + +```js +assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]\.name;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon]; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md new file mode 100644 index 00000000000..4b1f8fb6cb6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md @@ -0,0 +1,222 @@ +--- +id: 62a8ce73d0dce43468f6689c +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +You can insert variables into a string with the concatenation operator `+`. Update the `You now have a new weapon.` string to say `You now have a ` and the name of the new weapon. Remember to end the sentence with a period. + +Here is an example that creates the string `Hello, our name is freeCodeCamp.`: + +```js +const ourName = "freeCodeCamp"; +const ourStr = "Hello, our name is " + ourName + "."; +``` + +# --hints-- + +You should update the `text.innerText` assignment to start with the string `You now have a `. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1/); +``` + +You should use the concatenation operator to add `newWeapon` to the end of the `text.innerText` string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon/); +``` + +You should use the concatenation operator to end your `text.innerText` string with a `.`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon\s*\+\s*('|")\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a new weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md new file mode 100644 index 00000000000..748ab4d2f08 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md @@ -0,0 +1,229 @@ +--- +id: 62a8cf22272d6d35af80d4ac +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Back at the beginning of this project, you created the `inventory` array. Add the `newWeapon` to the end of the `inventory` array using the `push()` method. + +Here is an example: + +```js +const arr = ["first"]; +const next = "second"; +arr.push(next); +``` + +`arr` would now have the value `["first", "second"]`. + +# --hints-- + +You should use the `push` method on `inventory`. + +```js +assert.match(buyWeapon.toString(), /inventory\.push/) +``` + +You should `push` the value of `newWeapon` to the `inventory` array. + +```js +assert.match(buyWeapon.toString(), /inventory\.push\s*\(\s*newWeapon\s*\)/) +``` + +Your `buyWeapon` function should add the value of `newWeapon` to the `inventory` array. + +```js +inventory = []; +currentWeapon = 0; +buyWeapon(); +assert.deepEqual(inventory, ["dagger"]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md new file mode 100644 index 00000000000..b7219fb9be1 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md @@ -0,0 +1,218 @@ +--- +id: 62a8d0337d7c67377a4a76c6 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Up until now, any time `text.innerText` was updated the old text was erased. This time, use the `+=` operator to add text to the end of `text.innerText`. Add the string ` In your inventory you have: ` - include the spaces at the beginning and the end. + +# --hints-- + +You should add a new line with `text.innerText`. + +```js +const matches = buyWeapon.toString().match(/text\.innerText/g); +assert.lengthOf(matches, 2); +``` + +You should use the `+=` operator to add to `text.innerText`. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*/) +``` + +You should add the string ` In your inventory you have: ` to the end of `text.innerText`. Mind the spaces! + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md new file mode 100644 index 00000000000..098be4a56e6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md @@ -0,0 +1,211 @@ +--- +id: 62a8d08668fa8b38732486e9 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +At the end of the second `text.innerText` string you just added, use the concatenation operator to add the contents of `inventory` to the string. + +# --hints-- + +You should not change the ` In your inventory you have: ` string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/) +``` + +You should use the concatenation operator `+` to add the contents of `inventory` to the string. + +```js +assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1\s*\+\s*inventory/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: "; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md new file mode 100644 index 00000000000..3ebebb1edd6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md @@ -0,0 +1,226 @@ +--- +id: 62a8d0c4f12c2239b6618582 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add an `else` statement to your `buyWeapon` function. In that statement, set `text.innerText` to equal `You do not have enough gold to buy a weapon.`. + +# --hints-- + +You should add an `else` statement to your `buyWeapon` function. + +```js +assert.match(buyWeapon.toString(), /else/); +``` + +Your `else` statement should come after your `if` statement. + +```js +const split = buyWeapon.toString().split(/\s|\n/); +assert.isAbove(split.indexOf('else'), split.indexOf('if')); +``` + +You should set `text.innerText` to `You do not have enough gold to buy a weapon.`. + +```js +assert.match(buyWeapon.toString(), /text.innerText\s*=\s*('|")You do not have enough gold to buy a weapon.\1/); +``` + +Your `else` statement should set `text.innerText` to `You do not have enough gold to buy a weapon.`. + +```js +gold = 20; +buyWeapon(); +assert.equal(text.innerText, 'You do not have enough gold to buy a weapon.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md new file mode 100644 index 00000000000..1c2b1476e8f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md @@ -0,0 +1,225 @@ +--- +id: 62a8d0fdf2dad83a92883a80 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +Once a player has the best weapon, they cannot buy another one. Wrap all of the code in your `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than `3` - the index of the last weapon. + +# --hints-- + +You should have a new `if` statement that checks if `currentWeapon` is less than `3`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*\<\s*3/) +``` + +Your existing `if` statement should be within your new `if` statement. + +```js +currentWeapon = 5; +gold = 50; +buyWeapon(); +assert.equal(gold, 50); +``` + +Your existing `else` statement should be within your new `if` statement. + +```js +currentWeapon = 5; +gold = 10; +buyWeapon(); +assert.notEqual(text.innerText, "You do not have enough gold to buy a weapon."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md new file mode 100644 index 00000000000..a705f22a61f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md @@ -0,0 +1,215 @@ +--- +id: 62a8d143f2a58e3b6d6e9c33 +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Arrays have a `length` property that returns the number of items in the array. You may want to add new values to the `weapons` array in the future. Change your `if` condition to check if `currentWeapon` is less than the length of the `weapons` array. An example of checking the length of an array `myArray` would look like `myArray.length`. + +# --hints-- + +You should use the `length` property on the `weapons` array. + +```js +assert.match(buyWeapon.toString(), /weapons\.length/); +``` + +Your `if` statement should check if `currentWeapon` is less than `weapons.length`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < 3) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md new file mode 100644 index 00000000000..4db3e483fce --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md @@ -0,0 +1,215 @@ +--- +id: 62a8d1c72e8bb13c2074d93c +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +You now have an error to fix. The `currentWeapon` variable is the index of the `weapons` array, but array indexing starts at zero. The index of the last element in an array is one less than the length of the array. Change the `if` condition to check `weapons.length - 1`, instead of `weapons.length`. + +# --hints-- + +You should update the condition to subtract `1` from `weapons.length`. + +```js +assert.match(buyWeapon.toString(), /weapons\.length\s*-\s*1/); +``` + +Your condition should check if `currentWeapon` is less than `weapons.length - 1`. + +```js +assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length\s*-\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md new file mode 100644 index 00000000000..2061307615c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md @@ -0,0 +1,224 @@ +--- +id: 62a8d2146a3e853d0a6e28ca +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Add an `else` statement for your outer `if` statement. Inside this new `else` statement, set `text.innerText` to `You already have the most powerful weapon!`. + +# --hints-- + +You should have another `else` statement in your `buyWeapon` function. + +```js +const matches = buyWeapon.toString().match(/else/g); +assert.equal(matches.length, 2); +``` + +You should set `text.innerText` to `You already have the most powerful weapon!`. + +```js +assert.match(buyWeapon.toString(), /('|")You already have the most powerful weapon!\1/); +``` + +You should modify your `text.innerText` to `You already have the most powerful weapon!` within your outer `else` statement. + +```js +currentWeapon = 5; +buyWeapon(); +assert.equal(text.innerText, "You already have the most powerful weapon!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md new file mode 100644 index 00000000000..cd0c1476164 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md @@ -0,0 +1,229 @@ +--- +id: 62a8d24c97461b3ddb9397c8 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Once a player has the most powerful weapon, you can give them the ability to sell their old weapons. In the outer `else` statement, set `button2.innerText` to `Sell weapon for 15 gold`. Also set `button2.onclick` to the function name `sellWeapon`. + +# --hints-- + +You should set the value of `button2.innerText`. + +```js +assert.match(buyWeapon.toString(), /button2\.innerText/); +``` + +You should set the value of `button2.innerText` to `Sell weapon for 15 gold`. + +```js +assert.match(buyWeapon.toString(), /button2\.innerText\s*=\s*('|")Sell weapon for 15 gold\1;/); +``` + +You should set the value of `button2.onclick`. + +```js +assert.match(buyWeapon.toString(), /button2\.onclick/); +``` + +You should set the value of `button2.onclick` to `sellWeapon`. + +```js +assert.match(buyWeapon.toString(), /button2\.onclick\s*=\s*sellWeapon;/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +--fcc-editable-region-- +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md new file mode 100644 index 00000000000..a5e28c829e7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md @@ -0,0 +1,221 @@ +--- +id: 62a8d2e2a073be3edb46116f +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Create an empty `sellWeapon` function. + +# --hints-- + +You should use the `function` keyword to declare a `sellWeapon` variable. + +```js +assert.isFunction(sellWeapon); +``` + +`sellWeapon` should be an empty function. + +```js +assert.match(sellWeapon.toString(), /sellWeapon\(\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md new file mode 100644 index 00000000000..77100cf5462 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md @@ -0,0 +1,223 @@ +--- +id: 62a8d31ebbc10e3fe1b28e03 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Players should not be able to sell their only weapon. Inside the `sellWeapon` function, add an `if` statement with a condition that checks if the length of the `inventory` array is greater than `1`. + +# --hints-- + +Your `sellWeapon` function should have an `if` statement. + +```js +assert.match(sellWeapon.toString(), /if/); +``` + +Your `if` statement should check if `inventory.length` is greater than `1`. + +```js +assert.match(sellWeapon.toString(), /if\s*\(inventory\.length\s*>\s*1\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md new file mode 100644 index 00000000000..dbbf432519d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md @@ -0,0 +1,234 @@ +--- +id: 62a8d35660db4040ba292193 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Inside the `if` statement, set `gold` equal to `15` more than its current value. Also update `goldText.innerText` to the new value. + +# --hints-- + +You should use compound assignment to increase `gold` by `15`. + +```js +assert.match(sellWeapon.toString(), /gold\s*\+=\s*15/); +``` + +You should set `goldText.innerText` to `gold`. + +```js +assert.match(sellWeapon.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +Your code should be in your `if` statement. + +```js +inventory = ["Naomi"]; +gold = 0 +sellWeapon(); +assert.equal(gold, 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md new file mode 100644 index 00000000000..8f3764e0ef9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md @@ -0,0 +1,223 @@ +--- +id: 62a8d382cd075f4169223e14 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Use the `let` keyword to create a variable named `currentWeapon`. Don't assign it a value yet. + +Notice that you already have a `currentWeapon` variable elsewhere in your code. Since you are using the `let` keyword instead of `var`, the new `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old `currentWeapon` will be used again. + +# --hints-- + +You should use `let` to declare a `currentWeapon` variable. + +```js +assert.match(sellWeapon.toString(), /currentWeapon/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md new file mode 100644 index 00000000000..1fb5303efc5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md @@ -0,0 +1,233 @@ +--- +id: 62a8d539dc11cb42b5dd7ec8 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +The `shift()` method on an array removes the first element in the array and returns it. Use this method to take the first element from the `inventory` array and assign it to your `currentWeapon` variable. + +# --hints-- + +Your `sellWeapon` function should use the `shift()` method. + +```js +assert.match(sellWeapon.toString(), /shift\(\)/); +``` + +You should use the `shift()` method on the `inventory` array. + +```js +assert.match(sellWeapon.toString(), /inventory\.shift\(\)/); +``` + +You should assign the value of `inventory.shift()` to your `currentWeapon` variable. + +```js +assert.match(sellWeapon.toString(), /currentWeapon\s*=\s*inventory\.shift\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md new file mode 100644 index 00000000000..03e5cceea99 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md @@ -0,0 +1,249 @@ +--- +id: 62a8d61ddfe35744369365b7 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +After your `currentWeapon`, use the concatenation operator to set `text.innerText` to the string `You sold a `, then `currentWeapon`, then the string `.`. + +# --hints-- + +You should use the assignment operator with `text.innerText`. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=/); +``` + +You should add `You sold a ` to `text.innerText`. Spacing is important. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1/); +``` + +You should add the value of `currentWeapon` to the `You sold a ` string. Use the concatenation operator to do this on the same line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a\s\1\s*\+\s*\_currentWeapon/); +``` + +You should add the string `.` to the value of `currentWeapon`. Use the concatenation operator to do this on the same line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1\s*\+\s*\_currentWeapon\s+\+\s+('|")\.\2/); +``` + +Your `text.innerText` should update to the proper string. + +```js +inventory = ["first", "second"]; +text.innerText = "Hello"; +sellWeapon(); +assert.equal(text.innerText, "You sold a first."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md new file mode 100644 index 00000000000..bc8435faa22 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md @@ -0,0 +1,243 @@ +--- +id: 62a8d6c7001ebc45350e3d16 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Now use the `+=` operator to add the string ` In your inventory you have: ` and the contents of `inventory` to the `text.innerText`. Make sure to include the space at the beginning and end of the ` In your inventory you have: ` string. + +# --hints-- + +You should add another `text.innerText` line. + +```js +const matches = sellWeapon.toString().match(/text\.innerText/g); +assert.equal(matches.length, 2); +``` + +You should use compound assignment on `text.innerText`. + +```js +const matches = sellWeapon.toString().match(/text\.innerText\s*\+=/g); +assert.equal(matches.length, 1); +``` + +You should add the string ` In your inventory you have: ` to the second `text.innerText` line. Spacing matters. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1/); +``` + +You should use the concatenation operator to add the value of `inventory` to the end of your second `text.innerText` line. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1\s*\+\s*inventory/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md new file mode 100644 index 00000000000..3e59ee00a2d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md @@ -0,0 +1,237 @@ +--- +id: 62a8d7b8ab568b4649998954 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Use an `else` statement to run when the `inventory` length is not more than one. Set the `text.innerText` to say `Don't sell your only weapon!`. + +# --hints-- + +Your `sellWeapon` function should have an `else` statement. + +```js +assert.match(sellWeapon.toString(), /else/); +``` + +You should set `text.innerText` to `Don't sell your only weapon!`. + +```js +assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")Don't sell your only weapon!\1/); +``` + +Your new `text.innerText` line should be in your `else` statement. + +```js +inventory = ["Naomi"]; +sellWeapon(); +assert.equal(text.innerText, "Don't sell your only weapon!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +--fcc-editable-region-- +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } +} +--fcc-editable-region-- + +function fightSlime() { + +} + +function fightBeast() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md new file mode 100644 index 00000000000..f47ecd3e581 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md @@ -0,0 +1,310 @@ +--- +id: 62a8d81f539f004776dd9b1e +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Now you can start the code to fight monsters. To keep your code organized, your `fightDragon` function has been moved for you to be near the other `fight` functions. + +Below your `weapons` array, define a `monsters` variable and assign it an array. Set that array to have three objects, each with a `name`, `level`, and `health` properties. The first object's values should be `slime`, `2`, and `15`, in order. The second should be `fanged beast`, `8`, and `60`. The third should be `dragon`, `20`, and `300`. + +# --hints-- + +You should use `const` to declare a `monsters` variable. + +```js +assert.match(code, /const\s*monsters/); +``` + +Your `monsters` variable should be an array. + +```js +assert.isArray(monsters); +``` + +Your `monsters` variable should have 3 values. + +```js +assert.lengthOf(monsters, 3); +``` + +Your `monsters` array should have 3 objects. + +```js +assert(monsters.every(val => typeof val === "object")); +``` + +The first value in your `monsters` array should have an object with a `name` property set to `slime`. + +```js +assert.equal(monsters[0].name, "slime"); +``` + +The first value in your `monsters` array should have an object with a `level` property set to `2`. + +```js +assert.equal(monsters[0].level, 2); +``` + +The first value in your `monsters` array should have an object with a `health` property set to `15`. + +```js +assert.equal(monsters[0].health, 15); +``` + +The second value in your `monsters` array should have an object with a `name` property set to `fanged beast`. + +```js +assert.equal(monsters[1].name, "fanged beast"); +``` + +The second value in your `monsters` array should have an object with a `level` property set to `8`. + +```js +assert.equal(monsters[1].level, 8); +``` + +The second value in your `monsters` array should have an object with a `health` property set to `60`. + +```js +assert.equal(monsters[1].health, 60); +``` + +The third value in your `monsters` array should have an object with a `name` property set to `dragon`. + +```js +assert.equal(monsters[2].name, "dragon"); +``` + +The third value in your `monsters` array should have an object with a `level` property set to `20`. + +```js +assert.equal(monsters[2].level, 20); +``` + +The third value in your `monsters` array should have an object with a `health` property set to `300`. + +```js +assert.equal(monsters[2].health, 300); +``` + +You should not add any extra properties to your objects. + +```js +assert.deepEqual(monsters, [ + {name: "slime", level: 2, health: 15}, + {name: "fanged beast", level: 8, health: 60}, + {name: "dragon", level: 20, health: 300} +]) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +--fcc-editable-region-- + +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + +} + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md new file mode 100644 index 00000000000..4167fc0a12b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md @@ -0,0 +1,250 @@ +--- +id: 62a8dd468debb449b4454086 +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +Fighting each type of monster will use similar logic. Create an empty function called `goFight` to manage this logic. + +# --hints-- + +You should use the `function` keyword to declare `goFight`. + +```js +assert.match(code, /function\s*goFight/); +``` + +`goFight` should be an empty function. + +```js +assert.match(goFight.toString(), /goFight\s*\(\s*\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + +} + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md new file mode 100644 index 00000000000..b960134fac7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md @@ -0,0 +1,260 @@ +--- +id: 62a8dd9cdb16324b04cfd958 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +In your `fightSlime` function, set `fighting` equal to `0` - the index of `slime` in the `monsters` array. Remember that you already declared `fighting` earlier in your code, so you do not need `let` or `const` here. + +On the next line, call the `goFight` function. + +# --hints-- + +You should set `fighting` equal to `0`. + +```js +assert.match(fightSlime.toString(), /fighting\s*=\s*0;/); +``` + +You should not use `let` or `const`. + +```js +assert.notMatch(fightSlime.toString(), /let|const|var/); +``` + +You should call the `goFight` function. + +```js +assert.match(fightSlime.toString(), /goFight\(\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +--fcc-editable-region-- +function fightSlime() { + +} +--fcc-editable-region-- + +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function goFight() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md new file mode 100644 index 00000000000..aa331ca8991 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md @@ -0,0 +1,259 @@ +--- +id: 62a8dfcf7fb1044d2f478fd1 +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Following the same pattern, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also remove the `console.log` call from your `fightDragon` function. + +# --hints-- + +You should set `fighting` to `1` in your `fightBeast` function. + +```js +assert.match(fightBeast.toString(), /fighting\s*=\s*1;/); +``` + +You should set `fighting` to `2` in your `fightDragon` function. + +```js +assert.match(fightDragon.toString(), /fighting\s*=\s*2;/); +``` + +You should remove the `console.log` from your `fightDragon` function. + +```js +assert.notMatch(fightDragon.toString(), /console\.log/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +--fcc-editable-region-- +function fightBeast() { + +} + +function fightDragon() { + console.log("Fighting dragon."); +} +--fcc-editable-region-- + +function goFight() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md new file mode 100644 index 00000000000..5eccfafdc9b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md @@ -0,0 +1,269 @@ +--- +id: 62a8e0d1d0110b4ec421489f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +At the end of your code, create two empty functions named `attack` and `dodge`. + +# --hints-- + +You should use the `function` keyword to declare `attack`. + +```js +assert.match(code, /function\s*attack/); +``` + +`attack` should be an empty function. + +```js +assert.match(attack.toString(), /attack\s*\(\s*\)\s*\{\s*\}/); +``` + +You should use the `function` keyword to declare `dodge`. + +```js +assert.match(code, /function\s*dodge/); +``` + +`dodge` should be an empty function. + +```js +assert.match(dodge.toString(), /dodge\s*\(\s*\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md new file mode 100644 index 00000000000..70d0725b1d9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md @@ -0,0 +1,288 @@ +--- +id: 62a8e142f7f0bd4fed898de3 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Add a new object to the end of the `locations` array, following the same properties as the rest of the objects. Set `name` to `fight`, `button text` to an array with `Attack`, `Dodge`, and `Run`, `button functions` to an array with `attack`, `dodge`, and `goTown`, and `text` to `You are fighting a monster.`. + +# --hints-- + +Your `locations` array should have 4 values in it. + +```js +console.log(locations); +assert.lengthOf(locations, 4); +``` + +Your new value should be an object. + +```js +assert.isObject(locations[3]); +``` + +Your new object should have a `name` property set to `fight`. + +```js +assert.equal(locations[3].name, "fight"); +``` + +Your new object should have a `button text` property set to an array with the strings `Attack`, `Dodge`, and `Run`. + +```js +assert.deepEqual(locations[3]["button text"], ["Attack", "Dodge", "Run"]); +``` + +Your new object should have a `button functions` property set to an array with the variables `attack`, `dodge`, and `goTown`. + +```js +assert.deepEqual(locations[3]["button functions"], [attack, dodge, goTown]); +``` + +Your new object should have a `text` property set to `You are fighting a monster.`. + +```js +assert.equal(locations[3].text, "You are fighting a monster."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + +} + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md new file mode 100644 index 00000000000..d87c8179a6e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md @@ -0,0 +1,269 @@ +--- +id: 62a8e1dc897df55108bcb5e8 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +In the `goFight` function, call your `update` function with the fourth object in `locations` as an argument. + +# --hints-- + +You should call `update` in your `goFight` function. + +```js +assert.match(goFight.toString(), /update/); +``` + +You should pass the fourth object in your `locations` array to your `update` call. + +```js +assert.match(goFight.toString(), /update\(locations\[3\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md new file mode 100644 index 00000000000..ec221bb2490 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md @@ -0,0 +1,270 @@ +--- +id: 62a8e21398ad61520edb724f +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Below your `update` call, set the `monsterHealth` to be the health of the current monster. You can get this value by accessing the `health` property of `monsters[fighting]`. + +# --hints-- + +You should use bracket notation to access the `monsters` array at the `fighting` index. + +```js +assert.match(goFight.toString(), /monsters\[fighting\]/); +``` + +You should assign the value of `monsters[fighting]` to the `monsterHealth` variable. + +```js +assert.match(goFight.toString(), /monsterHealth\s*=\s*monsters\[fighting\](\.health|\[('|")health\2\])/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md new file mode 100644 index 00000000000..64379cb2b5d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md @@ -0,0 +1,281 @@ +--- +id: 62a8e24c673b075317cc0b09 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +The HTML element that shows the monster's stats has been hidden with CSS. Display the `monsterStats` element by updating the `display` property of the `style` property to `block`. For example, updating the `first` property of the `name` property of `user` would look like: + +```js +user.name.first = "Naomi"; +``` + +# --hints-- + +You should use dot notation to access the `style` property of `monsterStats`. + +```js +assert.match(goFight.toString(), /monsterStats\.style/); +``` + +You should use dot notation to access the `display` property of the `style` property. + +```js +assert.match(goFight.toString(), /monsterStats\.style\.display/); +``` + +You should set the `display` property to `block`. + +```js +assert.match(goFight.toString(), /monsterStats\.style\.display\s*=\s*('|")block\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md new file mode 100644 index 00000000000..0ccd9de7c1a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md @@ -0,0 +1,284 @@ +--- +id: 62a8e271f8e3d1541f9624ad +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Now set the `innerText` property of `monsterName` to be the `name` property of the current monster. Do the same for `monsterHealthText` and the `health` property. + +# --hints-- + +You should use dot notation to access the `innerText` property of `monsterName`. + +```js +assert.match(goFight.toString(), /monsterName\.innerText/); +``` + +You should set the `innerText` property of `monsterName` to be the `name` value of the current monster. Remember that you can get the current monster with `monsters[fighting]`. + +```js +assert.match(goFight.toString(), /monsterName\.innerText\s*=\s*monsters\[fighting\]\.name/); +``` + +You should use dot notation to access the `innerText` property of `monsterHealthText`. + +```js +assert.match(goFight.toString(), /monsterHealthText\.innerText/); +``` + +You should set the `innerText` property of `monsterHealthText` to be the `health` value of the current monster. Remember that you assigned this value to a `monsterHealth` variable. + +```js +assert.match(goFight.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +--fcc-editable-region-- +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + +} +--fcc-editable-region-- + +function attack() { + +} + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md new file mode 100644 index 00000000000..229ca08f2a2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md @@ -0,0 +1,285 @@ +--- +id: 62a8e35675c18c56354c08cf +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Now you can build the `attack` function. First, update the `text` message to say `The [monster name] attacks.`, replacing `[monster name]` with the name of the monster. Remember you can use the concatenation operator for this. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text`. + +```js +assert.match(attack.toString(), /text\.innerText/); +``` + +You should assign the string `The ` to `innerText` property of `text`. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1/); +``` + +You should use the concatenation operator to add the value of `monsters[fighting].name` to the `The ` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name/); +``` + +You should use the concatenation operator to add the string ` attacks.` to the `monsters[fighting].name` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name\s*\+\s*('|") attacks\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md new file mode 100644 index 00000000000..6566de3802a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md @@ -0,0 +1,293 @@ +--- +id: 62a8e41e2f190c58404dd46e +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +On a new line, add the string ` You attack it with your [weapon].` to the `text` value, replacing `[weapon]` with the player's current weapon. + +# --hints-- + +You should use dot notation to access the `innerText` property of `text` on a new line. + +```js +const match = attack.toString().match(/text\.innerText/g); +assert.lengthOf(match, 2); +``` + +You should use compound assignment with `text.innerText`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=/); +``` + +You should add the string ` You attack it with your ` to the `text.innerText` value. Remember that spacing matters. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1/); +``` + +You should use the concatenation operator to add the current weapon to the string. You can get the current weapon with `weapons[currentWeapon].name`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name/); +``` + +You should use the concatenation operator to end your string with `.`. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name\s*\+\s*('|")\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md new file mode 100644 index 00000000000..7ebd6d5383a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md @@ -0,0 +1,275 @@ +--- +id: 62a8e45cc600c3591cee671a +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Next, set `health` to equal `health` minus the monster's level. Remember you can get this from the `monsters[fighting].level` property. + +# --hints-- + +You should use compound assignment with `health`. + +```js +assert.match(attack.toString(), /health\s*-=/); +``` + +You should subtract the monster's current level from `health`. + +```js +assert.match(attack.toString(), /health\s*-=\s*monsters\[fighting\]\.level/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md new file mode 100644 index 00000000000..687f2f04e57 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md @@ -0,0 +1,288 @@ +--- +id: 62a8e49f4df7af5ae2d7a616 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember you have the `currentWeapon` variable and the `power` property. + +# --hints-- + +You should use compound assignment to modify the `monsterHealth` variable. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=/); +``` + +You should use bracket notation with `currentWeapon` to access `weapons`. + +```js +assert.match(attack.toString(), /weapons\[currentWeapon\]/); +``` + +You should use dot notation to access the `power` property of `weapons[currentWeapon]`. + +```js +assert.match(attack.toString(), /weapons\[currentWeapon\]\.power/); +``` + +You should subtract the `power` of the current weapon from `monsterHealth`. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md new file mode 100644 index 00000000000..fe85bcd7f75 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md @@ -0,0 +1,316 @@ +--- +id: 62a8e4dc6a60f85bf256a0cb +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +JavaScript offers the built-in `Math` utility which offers a number of mathematical tools. One of those is `Math.random()`, which generates a random number between 0 and 1. Another is `Math.floor()`, which rounds a given number down to the nearest integer. + +Using these, you can generate a random number within a range. For example, this generates a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1;`. + +Following this pattern, add a random number between one and the value of `xp` at the end of your `monsterHealth` variable change. + +# --hints-- + +You should use the same `monsterHealth` line you already wrote. + +```js +assert.lengthOf(attack.toString().match(/monsterHealth/g), 1); +``` + +You should add to the `weapons[currentWeapon].power` value. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+/); +``` + +You should use `Math.floor()`. + +```js +assert.match(attack.toString(), /Math\.floor/); +``` + +You should use `Math.random()`. + +```js +assert.match(attack.toString(), /Math\.random/); +``` + +You should multiply `Math.random()` by the value of `xp`. + +```js +assert.match(attack.toString(), /Math\.random\(\)\s*\*\s*xp/); +``` + +You should use `Math.floor()` to round the result of `Math.random() * xp` down. + +```js +assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)/); +``` + +You should add `1` to the result of `Math.floor()`. + +```js +assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/); +``` + +You should add the result of `Math.floor(Math.random() * xp) + 1` to the result of `weapons[currentWeapon].power`. + +```js +assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power; +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md new file mode 100644 index 00000000000..a2c6fde768a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md @@ -0,0 +1,289 @@ +--- +id: 62a8ed36d7a7915dfa444ba2 +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`. + +# --hints-- + +You should update `healthText.innerText`. + +```js +assert.match(attack.toString(), /healthText\.innerText/); +``` + +You should set `healthText.innerText` to `health`. + +```js +assert.match(attack.toString(), /healthText\.innerText\s*=\s*health/); +``` + +You should update `monsterHealthText.innerText`. + +```js +assert.match(attack.toString(), /monsterHealthText\.innerText/); +``` + +You should set `monsterHealthText.innerText` to `monsterHealth`. + +```js +assert.match(attack.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md new file mode 100644 index 00000000000..acf1efd38b0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md @@ -0,0 +1,285 @@ +--- +id: 62a8edd05e27cc668051686f +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +Add an `if` statement to check if `health` is less than or equal to `0`. If it is, call the `lose` function. + +# --hints-- + +Your `attack` function should have an `if` statement. + +```js +assert.match(attack.toString(), /if/); +``` + +Your `if` statement should check if `health` is less than or equal to `0`. + +```js +assert.match(attack.toString(), /if\s*\(health\s*<=\s*0\)/); +``` + +Your `if` statement should call the `lose` function. + +```js +assert.match(attack.toString(), /lose\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md new file mode 100644 index 00000000000..ac058ac03bc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md @@ -0,0 +1,297 @@ +--- +id: 62a8ee154c8946678775c4a4 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +You can make an `else` statement conditional by using `else if`. At the end of your `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to `0`. In your `else if`, call the `defeatMonster` function. + +Here's an example: + +```js +if (num > 10) { + +} else if (num < 5) { + +} +``` + +# --hints-- + +You should have an `else if` statement. + +```js +assert.match(attack.toString(), /else if/); +``` + +Your `else if` statement should check if `monsterHealth` is less than or equal to `0`. + +```js +assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)/); +``` + +Your `else if` statement should call the `defeatMonster` function. + +```js +assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)\s*\{\s*defeatMonster/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } +} +--fcc-editable-region-- + +function dodge() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md new file mode 100644 index 00000000000..94244500db9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md @@ -0,0 +1,297 @@ +--- +id: 62a8ee71f018e968a056d369 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +At the end of your code, create the `defeatMonster` and `lose` functions. Leave them empty for now. + +# --hints-- + +You should use the `function` keyword to declare `defeatMonster`. + +```js +assert.match(code, /function\s+defeatMonster/); +``` + +`defeatMonster` should be an empty function. + +```js +assert.match(defeatMonster.toString(), /defeatMonster\s*\(\)\s*\{\s*\}/); +``` + +You should use the `function` keyword to declare `lose`. + +```js +assert.match(code, /function\s+lose/); +``` + +`lose` should be an empty function. + +```js +assert.match(lose.toString(), /lose\s*\(\)\s*\{\s*\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md new file mode 100644 index 00000000000..3524f53b4a3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md @@ -0,0 +1,291 @@ +--- +id: 62a8eec45f77bc69e8775294 +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Inside the `dodge` function, set `text.innerText` equal to the string `You dodge the attack from the [monster]`. Replace `[monster]` with the name of the monster, using the `name` property. + +# --hints-- + +You should assign the string `You dodge the attack from the ` to the `text.innerText` property. Remember that spacing matters. + +```js +assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/); +``` + +You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`. + +```js +assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +--fcc-editable-region-- +function dodge() { + +} +--fcc-editable-region-- + +function defeatMonster() { + +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md new file mode 100644 index 00000000000..f67c008aa05 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md @@ -0,0 +1,299 @@ +--- +id: 62a8eefe2e68b66ac563816b +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +In your `defeatMonster` function, set `gold` equal to `gold` plus the monster's level times `6.7`. You can get the monster's level with the `level` property. + +Here is an example of setting `num` to `num` plus `5` * `8`: `num += 5 * 8`. Use `Math.floor()` to round the result down. + +# --hints-- + +You should use compound assignment to modify `gold`. + +```js +assert.match(defeatMonster.toString(), /gold\s*\+=/); +``` + +You should use `Math.floor()` to round the result of the monster's level times `6.7`. + +```js +assert.match(defeatMonster.toString(), /Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/); +``` + +You should add the result of `Math.floor(gold + monsters[fighting].level * 6.7)` to `gold`. + +```js +assert.match(defeatMonster.toString(), /gold\s*\+=\s*Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md new file mode 100644 index 00000000000..678fd1314fc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md @@ -0,0 +1,292 @@ +--- +id: 62a8ef6a52292f6bdca4f6f8 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Set `xp` to `xp` plus the monster's level. + +# --hints-- + +You should use compound assignment to modify `xp`. + +```js +assert.match(defeatMonster.toString(), /xp\s*\+=/); +``` + +You should add the monster's level to `xp`. + +```js +assert.match(defeatMonster.toString(), /xp\s*\+=\s*monsters\[fighting\]\.level/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md new file mode 100644 index 00000000000..cb9eadcb3ec --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md @@ -0,0 +1,293 @@ +--- +id: 62a8ef8f0c76a46cd221a68c +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +Now update `goldText` and `xpText` to display the updated values. + +# --hints-- + +You should update `goldText.innerText` to the value of `gold`. + +```js +assert.match(defeatMonster.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should update `xpText.innerText` to the value of `xp`. + +```js +assert.match(defeatMonster.toString(), /xpText\.innerText\s*=\s*xp/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md new file mode 100644 index 00000000000..ca92f837431 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md @@ -0,0 +1,295 @@ +--- +id: 62a8efb0e3ce826db8daf80f +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Finish the `defeatMonster` function by calling the `update` function with `locations[4]` as the argument. + +# --hints-- + +You should call the `update` function. + +```js +assert.match(defeatMonster.toString(), /update/); +``` + +You should pass `locations[4]` as the argument. + +```js +assert.match(defeatMonster.toString(), /update\(locations\[4\]\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +--fcc-editable-region-- +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + +} +--fcc-editable-region-- + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md new file mode 100644 index 00000000000..dd0068655fd --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md @@ -0,0 +1,319 @@ +--- +id: 62a8eff21c0b0f6ebe5b8e38 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Your `locations` array doesn't have a fifth element, so `locations[4]` doesn't work. Add a new object at the end of the `locations` array, following the same structure as the other objects. Set `name` to `kill monster`, set `button text` to an array with three `Go to town square` strings, set `button functions` to an array with three `goTown` variables, and set `text` to `The monster screams Arg! as it dies. You gain experience points and find gold.`. + +# --hints-- + +Your `locations` array should have five values. + +```js +assert.lengthOf(locations, 5); +``` + +Your fifth `locations` value should be an object. + +```js +assert.isObject(locations[4]); +``` + +Your fifth `locations` value should have a `name` property with the value `kill monster`. + +```js +assert.equal(locations[4].name, 'kill monster'); +``` + +Your fifth `locations` value should have a `button text` property with the value an array with three `Go to town square` strings. + +```js +assert.deepEqual(locations[4]["button text"], ['Go to town square', 'Go to town square', 'Go to town square']); +``` + +Your fifth `locations` value should have a `button functions` property with the value an array with three `goTown` variables. + +```js +assert.deepEqual(locations[4]["button functions"], [goTown, goTown, goTown]); +``` + +Your fifth `locations` value should have a `text` property with the value `The monster screams Arg! as it dies. You gain experience points and find gold.`. + +```js +assert.equal(locations[4].text, 'The monster screams Arg! as it dies. You gain experience points and find gold.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md new file mode 100644 index 00000000000..ad30c67858d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md @@ -0,0 +1,301 @@ +--- +id: 62a8f06fb318666fef69f91e +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The word `Arg!` should have quotes around it. Besides escaping quotes, there is another way you can include quotation marks inside a string. Change the double quotes around the string `The monster screams Arg! as it dies. You gain experience points and find gold.` to single quotes `'`, then add double quotes around `Arg!`. + +# --hints-- + +You should use single quotes around the string. + +```js +assert.match(code, /'The monster screams "?Arg!"? as it dies. You gain experience points and find gold.'/); +``` + +You should use double quotes around `Arg!`. + +```js +assert.equal(locations[4].text, 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, +--fcc-editable-region-- + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: "The monster screams Arg! as it dies. You gain experience points and find gold." + } +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md new file mode 100644 index 00000000000..ee850581fa7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md @@ -0,0 +1,308 @@ +--- +id: 62a8f14fe6d1fc72454648c7 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +After a monster is defeated, the monster's stat box should no longer display. On the first line of the `update` function, use `monsterStats.style.display` to change the `display` value to `none`. + +# --hints-- + +You should use `monsterStats.style.display` in the `update` function. + +```js +assert.match(update.toString(), /monsterStats\.style\.display/); +``` + +You should set `monsterStats.style.display` to `none`. + +```js +assert.match(update.toString(), /monsterStats\.style\.display\s*=\s*('|")none\1/); +``` + +This should be the first line of the `update` function. + +```js +assert.match(update.toString(), /update\s*\(\s*location\s*\)\s*\{\s*monsterStats\.style\.display\s*=\s*('|")none\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md new file mode 100644 index 00000000000..de99851e153 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md @@ -0,0 +1,296 @@ +--- +id: 62a8f1d5f5ddbf74c07f733b +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +In the `lose` function, call the `update` function and pass in the sixth object of your `locations` array. Note that you haven't created this object just yet. + +# --hints-- + +Test 1 + +```js + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +--fcc-editable-region-- +function lose() { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md new file mode 100644 index 00000000000..097ae332be3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md @@ -0,0 +1,356 @@ +--- +id: 62a8f20463b324759953edad +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +At the end of your code, create a `restart` function. Inside this function, set `xp` to `0`, `health` to `100`, `gold` to `50`, `currentWeapon` to `0`, and set `inventory` to an array with the string `stick`. + +Also update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values. + +Finally, call the `goTown()` function. + +# --hints-- + +You should use the `function` keyword to declare `restart`. + +```js +assert.match(code, /function\s+restart/); +``` + +Your `restart` function should set `xp` to `0`. + +```js +assert.match(restart.toString(), /xp\s*=\s*0/); +``` + +Your `restart` function should set `health` to `100`. + +```js +assert.match(restart.toString(), /health\s*=\s*100/); +``` + +Your `restart` function should set `gold` to `50`. + +```js +assert.match(restart.toString(), /gold\s*=\s*50/); +``` + +Your `restart` function should set `currentWeapon` to `0`. + +```js +assert.match(restart.toString(), /currentWeapon\s*=\s*0/); +``` + +Your `restart` function should set `inventory` to an array with the string `stick`. + +```js +assert.match(restart.toString(), /inventory\s*=\s*\[\s*('|")stick\1\s*\]/); +``` + +Your `restart` function should call the `goTown()` function. + +```js +assert.match(restart.toString(), /goTown\(\)/); +``` + +You should set `goldText.innerText` to the value of `gold`. + +```js +assert.match(restart.toString(), /goldText\.innerText\s*=\s*gold/); +``` + +You should set `healthText.innerText` to the value of `health`. + +```js +assert.match(restart.toString(), /healthText\.innerText\s*=\s*health/); +``` + +You should set `xpText.innerText` to the value of `xp`. + +```js +assert.match(restart.toString(), /xpText\.innerText\s*=\s*xp/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md new file mode 100644 index 00000000000..84ad6a8fbc2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md @@ -0,0 +1,353 @@ +--- +id: 62a8f256b813a476cae51f49 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block. + +Here is an example that checks if `num` is equal to `5`: + +```js +if (num === 5) { + +} else { + +} +``` + +# --hints-- + +You should add a new `if` statement in your `else if` block. + +```js +const block = attack.toString().split("else if"); +assert.include(block[1], "if"); +``` + +Your new `if` statement should check if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)/); +``` + +You should call the `winGame` function in your `if` block. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)\s*\{\s*winGame\(\)/); +``` + +You should add an `else` block. + +```js +const block = attack.toString().split("else if"); +assert.include(block[1], "else"); +``` + +Your `else` block should call the `defeatMonster` function. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /else\s*\{\s*defeatMonster\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md new file mode 100644 index 00000000000..cd564871491 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md @@ -0,0 +1,355 @@ +--- +id: 62a8f2bc37675e77d5835235 +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. + +Here is an example of an `if-else` expression changed to a ternary: + +```js +if (num > 5) { + bigger() +} else { + smaller() +} + +num > 5 ? bigger() : smaller(); +``` + +Change your new `if-else` expression to a ternary. + +# --hints-- + +You should remove the `if` and `else` from your `else if` block. + +```js +const block = attack.toString().split("else if"); +assert.notMatch(block[1], /if/); +assert.notMatch(block[1], /else/); +``` + +You should check if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2/); +``` + +Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); +``` + +Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. + +```js +const block = attack.toString().split("else if"); +assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + if (fighting === 2) { + winGame(); + } else { + defeatMonster(); + } + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md new file mode 100644 index 00000000000..6cf34e927c5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md @@ -0,0 +1,322 @@ +--- +id: 62a8f35bde1750791f58773f +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +After the `lose` function, create a function called `winGame`. Inside the `winGame` function, call the `update` function and pass in `locations[6]`. + +# --hints-- + +You should use the `function` keyword to declare `winGame`. + +```js +assert.match(code, /function\s+winGame/); +``` + +Your `winGame` function should call the `update` function and pass in `locations[6]`. + +```js +assert.match(winGame.toString(), /update\s*\(\s*locations\[6\]\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md new file mode 100644 index 00000000000..8522ebd7445 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md @@ -0,0 +1,348 @@ +--- +id: 62a94114ce0b8918b487390f +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Add another object in the `locations` array. Everything should be the same as the `lose` object, except the `name` should be `win` and the `text` should be `You defeat the dragon! YOU WIN THE GAME! 🎉`. + +# --hints-- + +You should have seven values in the `locations` array. + +```js +assert.lengthOf(locations, 7); +``` + +Your seventh `locations` value should be an object. + +```js +assert.isObject(locations[6]); +``` + +Your seventh `locations` value should have a `name` property with the value `win`. + +```js +assert.equal(locations[6].name, 'win'); +``` + +Your seventh `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings. + +```js +assert.deepEqual(locations[6]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']); +``` + +Your seventh `locations` value should have a `button functions` property with the value an array with three `restart` variables. + +```js +assert.deepEqual(locations[6]["button functions"], [restart, restart, restart]); +``` + +Your seventh `locations` value should have a `text` property with the value `You defeat the dragon! YOU WIN THE GAME! 🎉`. + +```js +assert.equal(locations[6].text, 'You defeat the dragon! YOU WIN THE GAME! 🎉'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + } +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md new file mode 100644 index 00000000000..d38e7a2c1e2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md @@ -0,0 +1,326 @@ +--- +id: 62aa1cea594f152ba626b872 +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Your game could be complete now, but you can also make it more interesting. + +Inside your `attack` function, change your `health -= monsters[fighting].level;` line to `health -= getMonsterAttackValue(monsters[fighting].level);`. This sets `health` equal to `health` minus the return value of the `getMonsterAttackValue` function, and passes the `level` of the monster as an argument. + +# --hints-- + +You should update your `health` line to be `health -= getMonsterAttackValue(monsters[fighting].level);`. + +```js +assert.match(attack.toString(), /health\s*-=\s*getMonsterAttackValue\(monsters\[fighting\].level\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md new file mode 100644 index 00000000000..1dd06a164f4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md @@ -0,0 +1,332 @@ +--- +id: 62aa1d6736ba262cfa74344b +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Below your `attack` function, create an empty function named `getMonsterAttackValue`. It should take `level` as a parameter. + +# --hints-- + +You should use the `function` keyword to declare `getMonsterAttackValue`. + +```js +assert.match(code, /function\s+getMonsterAttackValue/); +``` + +Your `getMonsterAttackValue` should take `level` as a parameter. + +```js +assert.match(code, /getMonsterAttackValue\(\s*level\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md new file mode 100644 index 00000000000..62f2bd62862 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md @@ -0,0 +1,342 @@ +--- +id: 62aa1d9f535e102e4663e7a6 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +The attack of the monster will be based on the monster's `level` and the player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Assign it the equation `(level * 5) - (Math.floor(Math.random() * xp));`. + +This will set the monster's attack to five times their `level` minus a random number between 0 and the player's `xp`. + +# --hints-- + +You should use `const` to declare the variable `hit`. + +```js +assert.match(code, /const\s*hit/); +``` + +You should use the equation `(level * 5) - (Math.floor(Math.random() * xp))`. + +```js +assert.match(getMonsterAttackValue, /(level\s*\*\s*5)\s*-\s*(Math.floor\(Math.random\(\)\s*\*\s*xp\))/); +``` + +You should set `hit` to the value of `(level * 5) - (Math.floor(Math.random() * xp))`. + +```js +assert.match(code, /hit\s*=\s*\(level\s*\*\s*5\)\s*-\s*\(Math.floor\(Math.random\(\)\s*\*\s*xp\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md new file mode 100644 index 00000000000..0e1f69267c5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md @@ -0,0 +1,328 @@ +--- +id: 62aa1e3c7c3d552fb04f0f18 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Log the value of `hit` to the console to use in debugging. Remember that you can do this with `console.log()`. + +# --hints-- + +You should use the `console.log()` function to log the value of `hit`. + +```js +assert.match(getMonsterAttackValue.toString(), /console\.log\(\s*hit\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md new file mode 100644 index 00000000000..bcc2b14ee5a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md @@ -0,0 +1,338 @@ +--- +id: 62aa1e8ccd579330e097ce44 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +Functions run specific blocks of code when they are called, but they can also return a value. This value can be assigned to a variable and used elsewhere in your code. + +Use the `return` keyword to return the value of `hit` at the end of the function. + +# --hints-- + +You should use the `return` keyword to return the value of `hit`. + +```js +assert.match(getMonsterAttackValue, /return\s*hit/); +``` + +Your function should return the expected value. + +```js +xp = 0; +assert.equal(getMonsterAttackValue(1), 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md new file mode 100644 index 00000000000..725aa7e720a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md @@ -0,0 +1,350 @@ +--- +id: 62aa1eec891ed731db227a36 +title: Step 147 +challengeType: 0 +dashedName: step-147 +--- + +# --description-- + +If you play the game in its current state you might notice a bug. If your `xp` is high enough, the `getMonsterAttackValue` function will return a negative number, which will actually add to your total health when fighting a monster! + +In `getMonsterAttackValue`, change `return hit` to a ternary operator that returns `hit` if `hit` is greater than `0`, or returns `0` if it is not. + +Here is an example of returning a value based on `condition` with a ternary: + +```js +return condition ? true : false; +``` + +# --hints-- + +You should use a ternary to change the `return` value if `hit` is greater than `0`. + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0/); +``` + +You should use a ternary to return `hit` if `hit` is greater than `0` + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit/); +``` + +You should use a ternary to return `0` if `hit` is not greater than `0`. + +```js +assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit\s*:\s*0/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +--fcc-editable-region-- +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit; +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md new file mode 100644 index 00000000000..97ce39a4821 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md @@ -0,0 +1,331 @@ +--- +id: 62aa1fed3d4e873366ff3131 +title: Step 148 +challengeType: 0 +dashedName: step-148 +--- + +# --description-- + +In your `attack` function, below the `health` variable create an `if` statement. Set the condition to call the `isMonsterHit` function. + +# --hints-- + +You should add an `if` statement which calls `isMonsterHit` in the condition. + +```js +assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\s*\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md new file mode 100644 index 00000000000..3e9df421573 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md @@ -0,0 +1,333 @@ +--- +id: 62aa204c1e1d33348ff09944 +title: Step 149 +challengeType: 0 +dashedName: step-149 +--- + +# --description-- + +Move your `monsterHealth` assignment into your `if` block. + +# --hints-- + +You should move your `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1` into your `if` block. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + + } + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md new file mode 100644 index 00000000000..88836e37794 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md @@ -0,0 +1,338 @@ +--- +id: 62aa20e9cf1be9358f5aceae +title: Step 150 +challengeType: 0 +dashedName: step-150 +--- + +# --description-- + +Add an `else` statement to your `if` statement. In the `else` statement, use the `+=` operator to add the text ` You miss.` to the end of `text.innerText`. + +# --hints-- + +You should add an `else` block after your `if (isMonsterHit())` block. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/) +``` + +You should add the text ` You miss.` to the end of `text.innerText`. Remember to use compound assignment. + +```js +assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md new file mode 100644 index 00000000000..7a5d427b22f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md @@ -0,0 +1,342 @@ +--- +id: 62aa2136fc49b836dfedb959 +title: Step 151 +challengeType: 0 +dashedName: step-151 +--- + +# --description-- + +Now create the `isMonsterHit` function. This will return a boolean value (true or false) to be used in your `if` statement. Return the result of the comparison `Math.random() > .2`. + +# --hints-- + +You should use the `function` keyword to declare `isMonsterHit`. + +```js +assert.match(code, /function\s+isMonsterHit/); +``` + +Your `isMonsterHit` function should return the result of the comparison `Math.random() > .2`. + +```js +assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md new file mode 100644 index 00000000000..2db80762083 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md @@ -0,0 +1,354 @@ +--- +id: 62aa21971e3b743844849985 +title: Step 152 +challengeType: 0 +dashedName: step-152 +--- + +# --description-- + +The player should hit if either `Math.random() > .2` **or** if the player's health is less than 20. At the end of your `return` statement, use the logical or operator `||` and check if `health` is less than `20`. + +The logical or operator will use the first value if it is truthy, otherwise it will use the second value. + +For example: `num < 10 || num > 20`. + +# --hints-- + +Your `isMonsterHit` function should use the logical or operator. + +```js +assert.match(isMonsterHit.toString(), /\|\|/); +``` + +Your logical or operator should use `health < 20` as the fallback value. + +```js +assert.match(isMonsterHit.toString(), /\|\|\s*health\s*<\s*20/); +``` + +Your function should return the result of the comparison `Math.random() > .2` **or** `health < 20`. + +```js +assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2\s*\|\|\s*health\s*<\s*20/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +--fcc-editable-region-- +function isMonsterHit() { + return Math.random() > .2; +} +--fcc-editable-region-- + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md new file mode 100644 index 00000000000..34820846dd6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md @@ -0,0 +1,346 @@ +--- +id: 62aa21ea8d9d9f396b95dd87 +title: Step 153 +challengeType: 0 +dashedName: step-153 +--- + +# --description-- + +On every attack, there should be a chance that the player's weapon breaks. At the end of the `attack` function, add an empty `if` expression with the condition `Math.random() <= .1`. + +# --hints-- + +You should add an `if` statement to your `attack` function. + +```js +const ifs = attack.toString().match(/if/g); +assert.lengthOf(ifs, 4); +``` + +Your new `if` statement should check `Math.random() <= .1`. + +```js +assert.match(attack.toString(), /if\s*\(\s*Math\.random\(\)\s*<=\s*0?\.1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md new file mode 100644 index 00000000000..4210b69f7a8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md @@ -0,0 +1,367 @@ +--- +id: 62aa226207f33d3ad4c6f546 +title: Step 154 +challengeType: 0 +dashedName: step-154 +--- + +# --description-- + +Use the `+=` operator to add ` Your [weapon] breaks.` to the end of `text.innerText`, replacing `weapon` with the last item in the `inventory` array. You can get this last item by using `inventory.pop()`, which will remove the last item in the array AND return it so it appears in your string. + +# --hints-- + +You should use the compound assignment operator to modify `text.innerText`. + +```js +const concat = attack.toString().match(/\+=/g); +assert.lengthOf(concat, 3); +``` + +You should use the `pop` method on the `inventory` array. + +```js +assert.match(attack.toString(), /inventory\.pop\(\)/); +``` + +You should add the string " Your " to `text.innerText`. Remember that spacing matters. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1/); +``` + +You should add the return value of `inventory.pop()` to the ` Your ` string. + +```js +console.log(attack.toString()); +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)/); +``` + +You should add ` breaks.` to the ` "Your " + inventory.pop()` string. + +```js +assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)\s*\+\s*('|")\sbreaks\.\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md new file mode 100644 index 00000000000..44980b592f0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md @@ -0,0 +1,350 @@ +--- +id: 62aa22aba186563bcbf2c395 +title: Step 155 +challengeType: 0 +dashedName: step-155 +--- + +# --description-- + +Remember that the increment operator `++` can be used to increase a variable's value by 1. There is also a decrement operator `--` that can be used to decrease a variable's value by 1. + +Decrement the value of `currentWeapon` in your `if` statement, after you update the text. + +# --hints-- + +You should use the decrement operator. + +```js +assert.match(attack.toString(), /--/); +``` + +You should decrement `currentWeapon` in your `if` statement. + +```js +assert.match(attack.toString(), /currentWeapon\s*--/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md new file mode 100644 index 00000000000..65fc9cd5576 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md @@ -0,0 +1,364 @@ +--- +id: 62aa234322d4ad3e8bce42cc +title: Step 156 +challengeType: 0 +dashedName: step-156 +--- + +# --description-- + +We don't want a player's only weapon to break. The logical or operator checks if two statements are true. + +Use the logical and operator `&&` to add a second condition to your `if` statement. The player's weapon should only break if `inventory.length` does not equal (`!==`) one. + +Here is an example of an `if` statement with two conditions: + +```js +if (firstName === "Quincy" && lastName === "Larson") { + +} +``` + +# --hints-- + +You should not modify your existing `if` statement. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1/); +``` + +You should use the logical and operator `&&`. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&/); +``` + +You should use the logical and operator to check if `inventory.length` does not equal `1`. + +```js +assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&\s*inventory\.length\s*\!\=\=\s*1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +--fcc-editable-region-- +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} +--fcc-editable-region-- + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md new file mode 100644 index 00000000000..10cb8603022 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md @@ -0,0 +1,358 @@ +--- +id: 62aa2469c77b363fdb4f0e06 +title: Step 157 +challengeType: 0 +dashedName: step-157 +--- + +# --description-- + +Now you can add a small easter egg (hidden feature) to your game. + +Create a new function called `easterEgg` which calls the `update` function with `locations[7]` as the argument. + +# --hints-- + +You should use the `function` keyword to declare `easterEgg`. + +```js +assert.match(code, /function\s+easterEgg\s*/); +``` + +`easterEgg` should call the `update` function. + +```js +assert.match(easterEgg.toString(), /update\(/); +``` + +`easterEgg` should call the `update` function with `locations[7]` as the argument. + +```js +assert.match(easterEgg.toString(), /update\(\s*locations\[7\]\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md new file mode 100644 index 00000000000..a502101c334 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md @@ -0,0 +1,355 @@ +--- +id: 62aa252c3b1073415ba2b898 +title: Step 158 +challengeType: 0 +dashedName: step-158 +--- + +# --description-- + +Create an empty `pick` function with a parameter named `guess`. + +# --hints-- + +You should use the `function` keyword to declare `pick`. + +```js +assert.match(code, /function\s+pick\s*/); +``` + +`pick` should take a parameter named `guess`. + +```js +assert.match(pick.toString(), /pick\s*\(\s*guess\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } + +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md new file mode 100644 index 00000000000..5f657de3877 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md @@ -0,0 +1,384 @@ +--- +id: 62aa258da314ef42ba0a1858 +title: Step 159 +challengeType: 0 +dashedName: step-159 +--- + +# --description-- + +Create two new functions named `pickTwo` and `pickEight`. + +Inside each of those, call the `pick()` function and pass either `2` or `8` as the argument depending on the function name. + +# --hints-- + +You should use the `function` keyword to declare `pickTwo`. + +```js +assert.match(code, /function\s+pickTwo\s*/); +``` + +You should use the `function` keyword to declare `pickEight`. + +```js +assert.match(code, /function\s+pickEight\s*/); +``` + +`pickTwo` should call the `pick` function. + +```js +assert.match(pickTwo.toString(), /pick\(/); +``` + +`pickTwo` should call the `pick` function with `2` as the argument. + +```js +assert.match(pickTwo.toString(), /pick\(\s*2\s*\)/); +``` + +`pickEight` should call the `pick` function. + +```js +assert.match(pickEight.toString(), /pick\(/); +``` + +`pickEight` should call the `pick` function with `8` as the argument. + +```js +assert.match(pickEight.toString(), /pick\(\s*8\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +function pick(guess) { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md new file mode 100644 index 00000000000..01f3692b24e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md @@ -0,0 +1,389 @@ +--- +id: 62aa25fcb5837d43b4d9873d +title: Step 160 +challengeType: 0 +dashedName: step-160 +--- + +# --description-- + +Add another object to your `locations` array. Set `name` to `easter egg`, set `button text` to an array with the strings `2`, `8`, and `Go to town square?`, set `button functions` to an array with the variables `pickTwo`, `pickEight`, and `goTown`, and `text` to `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`. + +# --hints-- + +Your `locations` array should have 8 values. + +```js +assert.lengthOf(locations, 8); +``` + +Your eighth `locations` value should be an object. + +```js +assert.isObject(locations[7]); +``` + +Your eighth `locations` value should have a `name` property with the value `easter egg`. + +```js +assert.equal(locations[7].name, "easter egg"); +``` + +Your eighth `locations` value should have a `button text` property with the value an array with the strings `2`, `8`, and `Go to town square?`. + +```js +assert.deepEqual(locations[7]["button text"], ["2", "8", "Go to town square?"]); +``` + +Your eighth `locations` value should have a `button functions` property with the value an array with the variables `pickTwo`, `pickEight`, and `goTown`. + +```js +assert.deepEqual(locations[7]["button functions"], [pickTwo, pickEight, goTown]); +``` + +Your eighth `locations` value should have a `text` property with the value `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`. + +```js +assert.equal(locations[7].text, "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" +--fcc-editable-region-- + } + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md new file mode 100644 index 00000000000..c335f2d7bc9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md @@ -0,0 +1,364 @@ +--- +id: 62aa2626c3c10244b94c787b +title: Step 161 +challengeType: 0 +dashedName: step-161 +--- + +# --description-- + +Inside `pick`, use `let` to initialize a variable named `numbers` and set it to an empty array. + +# --hints-- + +Your `pick` function should initalize `numbers` to an empty array `[]`. + +```js +assert.match(pick.toString(), /numbers\s*=\s*\[\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md new file mode 100644 index 00000000000..b043a04a1a5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md @@ -0,0 +1,381 @@ +--- +id: 62aa264d23cdaa45a20efada +title: Step 162 +challengeType: 0 +dashedName: step-162 +--- + +# --description-- + +After your `numbers` array, create a `while` loop. A while loop accepts a condition, and will run the code in the block until the condition is no longer true. + +Your `while` loop should run while `numbers.length` is less than `10`. + +Here is an example of a `while` loop that runs while `i` is less than five. + +```js +while (i < 5) { + +} +``` + +# --hints-- + +Your `pick` function should have a `while` loop. + +```js +assert.match(pick.toString(), /while\s*\(/); +``` + +Your `while` loop should run while `numbers.length < 10`. + +```js +assert.match(pick.toString(), /while\s*\(\s*numbers.length\s*<\s*10\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md new file mode 100644 index 00000000000..beace6c6228 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md @@ -0,0 +1,379 @@ +--- +id: 62aa26cca3cd3d46c431e73b +title: Step 163 +challengeType: 0 +dashedName: step-163 +--- + +# --description-- + +Inside your `while` loop, push a random number between 0 and 10 to the end of the `numbers` array. You can create this random number with `Math.floor(Math.random() * 11)`. + +# --hints-- + +You should use the `push` method to add a random number to the end of the `numbers` array. + +```js +assert.match(pick.toString(), /numbers\.push\(/); +``` + +You should use `Math.floor(Math.random() * 11)` to create the random number. + +```js +assert.match(pick.toString(), /Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)/); +``` + +You should `push` the result of `Math.floor(Math.random() * 11)` to the end of the `numbers` array. + +```js +assert.match(pick.toString(), /numbers\.push\(\s*Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md new file mode 100644 index 00000000000..ac85513b88f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md @@ -0,0 +1,380 @@ +--- +id: 62aa27227399d647e1c37a3c +title: Step 164 +challengeType: 0 +dashedName: step-164 +--- + +# --description-- + +After the `while` loop, set `text.innerText` to equal `You picked [guess]. Here are the random numbers:`. Replace `guess` with the player's guess. + +# --hints-- + +You should set `text.innerText` to the string `You picked `. Remember that spacing matters. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1/); +``` + +You should use the concatenation operator to add the value of the `guess` parameter to your `You picked ` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess/); +``` + +You should use the concatenation operator to add the string `. Here are the random numbers:` to your `"You picked " + guess` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md new file mode 100644 index 00000000000..3b20e162326 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md @@ -0,0 +1,368 @@ +--- +id: 62aa27560def7048d7b4a095 +title: Step 165 +challengeType: 0 +dashedName: step-165 +--- + +# --description-- + +Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line. + +# --hints-- + +You should add the new line escape character `\n` to your `. Here are the random numbers: ` string. + +```js +assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\\n\2/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:"; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md new file mode 100644 index 00000000000..180270940d6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md @@ -0,0 +1,375 @@ +--- +id: 62aa27c40ca6f04ab8be5fac +title: Step 166 +challengeType: 0 +dashedName: step-166 +--- + +# --description-- + +A `for` loop runs for a specific number of times. We will break down how a `for` loop runs in the next several steps. For now, copy this loop below and paste it at the end of your `pick` function. + +```js +for (let x = 1; x < 5; x++) { + +} +``` + +# --hints-- + +You should copy the above loop into your `pick` function. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*x\s*=\s*1\s*;\s*x\s*<\s*5\s*;\s*x\s*\+\+\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md new file mode 100644 index 00000000000..4b4af2f8669 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md @@ -0,0 +1,375 @@ +--- +id: 62aa28032d863d4bd8058799 +title: Step 167 +challengeType: 0 +dashedName: step-167 +--- + +# --description-- + +`for` loops are declared with three expressions separated by semicolons. `for (a; b; c)`, where `a` is the initialization expression, `b` is the condition, and `c` is the final expression. + +The initialization expression is executed only once, before the loop starts, and is often used to define and set up the loop variable. Think of it like declaring a counter to use in your loop. + +Many `for` loops use `i` as the counter and start from 0, so change `let x = 1;` to `let i = 0;`. + +# --hints-- + +You should change your initialization in the `for` loop to be `let i = 0;`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let x = 1; x < 5; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md new file mode 100644 index 00000000000..7067e31d3f3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md @@ -0,0 +1,373 @@ +--- +id: 62aa287434dc284cea01157c +title: Step 168 +challengeType: 0 +dashedName: step-168 +--- + +# --description-- + +The second statement in a `for` loop, the condition statement, is evaluated at the beginning of every loop iteration. The loop will continue as long as the condition evaluates to be true. + +We want the loop to run 10 times, so change `x < 5` to `i < 10`. + +# --hints-- + +You should update your condition statement to be `i < 10`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; x < 5; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md new file mode 100644 index 00000000000..72bbc1f15f8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md @@ -0,0 +1,373 @@ +--- +id: 62aa28bbd6323e4dfb3ac43e +title: Step 169 +challengeType: 0 +dashedName: step-169 +--- + +# --description-- + +The last statement in a `for` loop, the final expression, is executed at the end of each loop iteration. + +Since we changed the initialization statement to use `i` instead of `x`, change `x++` to `i++`. This will increment the initializer `i` by 1 after each loop. + +# --hints-- + +You should change your final expression to `i++`. + +```js +assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;\s*i\+\+\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; x++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md new file mode 100644 index 00000000000..94da3ef415e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md @@ -0,0 +1,390 @@ +--- +id: 62aa28fb651bf14efa2dbb16 +title: Step 170 +challengeType: 0 +dashedName: step-170 +--- + +# --description-- + +Now you can write the logic to run in the loop. Inside your `for` loop, use the `+=` operator to add to the end of `text.innerText`. Add the number at index `i` of the `numbers` array, using `numbers[i]`. Then add a new line, using the escape sequence you used earlier. + +# --hints-- + +You should use compound assignment to add to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=/); +``` + +You should use bracket notation to access `numbers[i]`. + +```js +assert.match(pick.toString(), /numbers\[i\]/); +``` + +You should add `numbers[i]` to your `text.innerText` value. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]/); +``` + +You should add a new-line character after the `numbers[i]` value. Remember that you can do this with `\n`. + +```js +console.log(pick.toString()); +assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]\s*\+\s*('|")\\n\1/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md new file mode 100644 index 00000000000..b1540f1ac41 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md @@ -0,0 +1,387 @@ +--- +id: 62aa2943669c9d5026af6985 +title: Step 171 +challengeType: 0 +dashedName: step-171 +--- + +# --description-- + +The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +After your `for` loop, add an `if` expression to check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`. + +Here is an example of the `indexOf` syntax: + +```js +const numbers = [1, 2, 3]; +numbers.indexOf(2) // 1 +``` + +# --hints-- + +Your `pick` function should have an `if` statement. + +```js +assert.match(pick.toString(), /if/); +``` + +Your `if` statement should check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`. + +```js +assert.match(pick.toString(), /if\s*\(numbers\.indexOf\(\s*guess\s*\)\s*!==\s*-1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md new file mode 100644 index 00000000000..aa044de71f3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md @@ -0,0 +1,386 @@ +--- +id: 62aa2999ec27ec516655eba6 +title: Step 172 +challengeType: 0 +dashedName: step-172 +--- + +# --description-- + +Inside the `if` expression, add the string `Right! You win 20 gold!` to the end of `text.innerText`. Also, add `20` to the value of `gold` and update the `goldText.innerText`. + +# --hints-- + +You should use compound assignment to add the string `Right! You win 20 gold!` to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Right! You win 20 gold!\1/); +``` + +You should use compound assignment add `20` to the value of `gold`. + +```js +assert.match(pick.toString(), /gold\s*\+=\s*20/); +``` + +You should update the `goldText.innerText` to reflect the new value of `gold`. + +```js +assert.match(pick.toString(), /goldText\.innerText\s*\=\s*gold/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md new file mode 100644 index 00000000000..13ed8152080 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md @@ -0,0 +1,394 @@ +--- +id: 62aa29d8f8f88152c91350ca +title: Step 173 +challengeType: 0 +dashedName: step-173 +--- + +# --description-- + +Now add an `else` expression. Inside, add `Wrong! You lose 10 health!` to the end of `text.innerText`. Subtract `10` from `health` and update `healthText.innerText`. + +# --hints-- + +You should add an `else` block. + +```js +assert.match(pick.toString(), /else\s*\{/); +``` + +Your `else` block should use compound assignment to add `Wrong! You lose 10 health!` to the end of `text.innerText`. + +```js +assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Wrong! You lose 10 health!\1/); +``` + +Your `else` block should use compound assignment to subtract `10` from `health`. + +```js +assert.match(pick.toString(), /health\s*-=\s*10/); +``` + +Your `else` block should update the `healthText.innerText` to reflect the new value of `health`. + +```js +assert.match(pick.toString(), /healthText\.innerText\s*=\s*health/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md new file mode 100644 index 00000000000..5f48991b690 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md @@ -0,0 +1,394 @@ +--- +id: 62aa2aec2f09d454253aad6c +title: Step 174 +challengeType: 0 +dashedName: step-174 +--- + +# --description-- + +Since you subtracted health from the player, you need to check `if` the player's `health` is less than or equal to `0`. If it is, call the `lose` function. + +# --hints-- + +Your `pick` function should have a second `if` statement. + +```js +const match = pick.toString().match(/if/g); +assert.isAtLeast(match.length, 2); +``` + +Your `if` statement should check if the player's `health` is less than or equal to `0`. + +```js +assert.match(pick.toString(), /if\s*\(\s*health\s*<=\s*0\s*\)/); +``` + +Your `if` statement should call the `lose` function. + +```js +assert.match(pick.toString(), /lose\(\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +--fcc-editable-region-- +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md new file mode 100644 index 00000000000..f9bcbbb6387 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md @@ -0,0 +1,746 @@ +--- +id: 62aa2ba9cd881355a6f0a5a8 +title: Step 175 +challengeType: 0 +dashedName: step-175 +--- + +# --description-- + +Looking at your `kill monster` object, `button functions` currently has three `goTown` variables. Replace the third one with `easterEgg` - this is how a player will access the hidden feature of the game. Do not change the `button text`. + +With this, your RPG game is complete! You can now play around - can you defeat the dragon? + +# --hints-- + +You should update your fifth `locations` object to have a `button functions` property of `[goTown, goTown, easterEgg]`. + +```js +assert.deepEqual(locations[4]["button functions"], [goTown, goTown, easterEgg]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, +--fcc-editable-region-- + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + if (health <= 0) { + lose(); + } + } +} +``` + +# --solutions-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, easterEgg], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, + { + name: "lose", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You die. ☠️" + }, + { + name: "win", + "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], + "button functions": [restart, restart, restart], + text: "You defeat the dragon! YOU WIN THE GAME! 🎉" + }, + { + name: "easter egg", + "button text": ["2", "8", "Go to town square?"], + "button functions": [pickTwo, pickEight, goTown], + text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= getMonsterAttackValue(monsters[fighting].level); + if (isMonsterHit()) { + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + } else { + text.innerText += " You miss."; + } + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + fighting === 2 ? winGame() : defeatMonster(); + } + if (Math.random() <= .1 && inventory.length !== 1) { + text.innerText += " Your " + inventory.pop() + " breaks."; + currentWeapon--; + } +} + +function getMonsterAttackValue(level) { + const hit = (level * 5) - (Math.floor(Math.random() * xp)); + console.log(hit); + return hit > 0 ? hit : 0; +} + +function isMonsterHit() { + return Math.random() > .2 || health < 20; +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function winGame() { + update(locations[6]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} + +function easterEgg() { + update(locations[7]); +} + +function pickTwo() { + pick(2); +} + +function pickEight() { + pick(8); +} + +function pick(guess) { + let numbers = []; + while (numbers.length < 10) { + numbers.push(Math.floor(Math.random() * 11)); + } + text.innerText = "You picked " + guess + ". Here are the random numbers:\n"; + for (let i = 0; i < 10; i++) { + text.innerText += numbers[i] + "\n"; + } + if (numbers.indexOf(guess) !== -1) { + text.innerText += "Right! You win 20 gold!"; + gold += 20; + goldText.innerText = gold; + } else { + text.innerText += "Wrong! You lose 10 health!"; + health -= 10; + healthText.innerText = health; + if (health <= 0) { + lose(); + } + } +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md new file mode 100644 index 00000000000..d98f9e81298 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md @@ -0,0 +1,121 @@ +--- +id: 62b46e3a8d4be31be5af793d +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +We have run in to a slight problem. You are trying to query your page for a button element, but your `script` tag is in the `head` of your HTML. This means your code runs before the browser has finished reading the HTML, and your `document.querySelector()` will not see the button - because the browser hasn't processed it yet. + +To fix this, move your `script` element out of the `head` element, and place it at the end of your `body` element (just before the closing `` tag.) + +# --hints-- + +Your `script` element should not be in your `head` element. + +```js +const script = document.querySelector('script[data-src$="script.js"]'); +assert.notEqual(script.parentElement.tagName, "HEAD"); +``` + +Your `script` element should come at the end of your `body` element. + +```js +const script = document.querySelector('script[data-src$="script.js"]'); +assert.equal(script.previousElementSibling.tagName, "DIV"); +assert.isNull(script.nextElementSibling); +assert.equal(script.parentElement.tagName, "BODY"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +--fcc-editable-region-- + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +let button1 = document.querySelector("#button1"); +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md new file mode 100644 index 00000000000..e5d8098b79a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md @@ -0,0 +1,339 @@ +--- +id: 62ba17beef16c563069a65d8 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +In the `locations` array, add another object at the end. Set the `name` property to `lose`, set `button text` to an array with three `REPLAY?` strings, set `button functions` to an array with three `restart` variables, and set `text` to `You die. ☠️`. You can copy that text to use the emote. + +# --hints-- + +You should have six values in the `locations` array. + +```js +assert.lengthOf(locations, 6); +``` + +Your sixth `locations` value should be an object. + +```js +assert.isObject(locations[5]); +``` + +Your sixth `locations` value should have a `name` property with the value `lose`. + +```js +assert.equal(locations[5].name, 'lose'); +``` + +Your sixth `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings. + +```js +assert.deepEqual(locations[5]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']); +``` + +Your sixth `locations` value should have a `button functions` property with the value an array with three `restart` variables. + +```js +assert.deepEqual(locations[5]["button functions"], [restart, restart, restart]); +``` + +Your sixth `locations` value should have a `text` property with the value `You die. ☠️`. + +```js +assert.equal(locations[5].text, 'You die. ☠️'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const weapons = [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]; +const monsters = [ + { + name: "slime", + level: 2, + health: 15 + }, + { + name: "fanged beast", + level: 8, + health: 60 + }, + { + name: "dragon", + level: 20, + health: 300 + } +] +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + }, + { + name: "cave", + "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], + "button functions": [fightSlime, fightBeast, goTown], + text: "You enter the cave. You see some monsters." + }, + { + name: "fight", + "button text": ["Attack", "Dodge", "Run"], + "button functions": [attack, dodge, goTown], + text: "You are fighting a monster." + }, + { + name: "kill monster", + "button text": ["Go to town square", "Go to town square", "Go to town square"], + "button functions": [goTown, goTown, goTown], + text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' + }, +--fcc-editable-region-- + +--fcc-editable-region-- +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + monsterStats.style.display = "none"; + button1.innerText = location["button text"][0]; + button2.innerText = location["button text"][1]; + button3.innerText = location["button text"][2]; + button1.onclick = location["button functions"][0]; + button2.onclick = location["button functions"][1]; + button3.onclick = location["button functions"][2]; + text.innerText = location.text; +} + +function goTown() { + update(locations[0]); +} + +function goStore() { + update(locations[1]); +} + +function goCave() { + update(locations[2]); +} + +function buyHealth() { + if (gold >= 10) { + gold -= 10; + health += 10; + goldText.innerText = gold; + healthText.innerText = health; + } else { + text.innerText = "You do not have enough gold to buy health."; + } +} + +function buyWeapon() { + if (currentWeapon < weapons.length - 1) { + if (gold >= 30) { + gold -= 30; + currentWeapon++; + goldText.innerText = gold; + let newWeapon = weapons[currentWeapon].name; + text.innerText = "You now have a " + newWeapon + "."; + inventory.push(newWeapon); + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "You do not have enough gold to buy a weapon."; + } + } else { + text.innerText = "You already have the most powerful weapon!"; + button2.innerText = "Sell weapon for 15 gold"; + button2.onclick = sellWeapon; + } +} + +function sellWeapon() { + if (inventory.length > 1) { + gold += 15; + goldText.innerText = gold; + let currentWeapon = inventory.shift(); + text.innerText = "You sold a " + currentWeapon + "."; + text.innerText += " In your inventory you have: " + inventory; + } else { + text.innerText = "Don't sell your only weapon!"; + } +} + +function fightSlime() { + fighting = 0; + goFight(); +} + +function fightBeast() { + fighting = 1; + goFight(); +} + +function fightDragon() { + fighting = 2; + goFight(); +} + +function goFight() { + update(locations[3]); + monsterHealth = monsters[fighting].health; + monsterStats.style.display = "block"; + monsterName.innerText = monsters[fighting].name; + monsterHealthText.innerText = monsterHealth; +} + +function attack() { + text.innerText = "The " + monsters[fighting].name + " attacks."; + text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; + health -= monsters[fighting].level; + monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; + healthText.innerText = health; + monsterHealthText.innerText = monsterHealth; + if (health <= 0) { + lose(); + } else if (monsterHealth <= 0) { + defeatMonster(); + } +} + +function dodge() { + text.innerText = "You dodge the attack from the " + monsters[fighting].name; +} + +function defeatMonster() { + gold += Math.floor(monsters[fighting].level * 6.7); + xp += monsters[fighting].level; + goldText.innerText = gold; + xpText.innerText = xp; + update(locations[4]); +} + +function lose() { + update(locations[5]); +} + +function restart() { + xp = 0; + health = 100; + gold = 50; + currentWeapon = 0; + inventory = ["stick"]; + goldText.innerText = gold; + healthText.innerText = health; + xpText.innerText = xp; + goTown(); +} +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md new file mode 100644 index 00000000000..50b06ed7911 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md @@ -0,0 +1,114 @@ +--- +id: 62fc1ee0c5a89717d4785729 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give your `#monsterStats` element the same `border` and `padding` as your `#stats` element. Set its color to `white` and give it a `red` background. + +# --hints-- + +You should have a `#monsterStats` selector. + +```js +const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats'); +assert.exists(monsterStats); +``` + +Your `#monsterStats` selector should have a `border` of `1px solid black`. + +```js +const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +Your `#monsterStats` selector should have `5px` of padding. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +Your `#monsterStats` selector should have a `color` of `white`. + +```js +const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +Your `#monsterStats` selector should have a `background-color` of `red`. + +```js +const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color'); +assert.equal(background, 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md new file mode 100644 index 00000000000..1b122cb50c8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md @@ -0,0 +1,127 @@ +--- +id: 62fc20387ef88d1d1998aac5 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Use `querySelector()` to get the other two button elements, using their `#button2` and `#button3` `id`s. Store them in variables called `button2` and `button3`. Remember to use `const`. + +# --hints-- + +You should declare a `button2` variable with `const`. + +```js +assert.match(code, /const button2/); +``` + +Your `button2` variable should have the value of your `#button2` element. + +```js +assert.deepEqual(button2, document.querySelector('#button2')); +``` + +You should declare a `button3` variable with `const`. + +```js +assert.match(code, /const button3/); +``` + +Your `button3` variable should have the value of your `#button3` element. + +```js +assert.deepEqual(button3, document.querySelector('#button3')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md new file mode 100644 index 00000000000..5dd815b61c0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md @@ -0,0 +1,123 @@ +--- +id: 62fc211760bfc220f4734800 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Finally, use `querySelector()` to get the `#monsterHealth` element. Because you have already declared a `monsterHealth` variable earlier, you need to use a different variable name for this element. Declare a new variable with the `const` keyword and name it `monsterHealthText`. + +# --hints-- + +You should declare a `monsterHealthText` variable with `const`. + +```js +assert.match(code, /const monsterHealthText/); +``` + +Your `monsterHealthText` variable should have the value of your `#monsterHealth` element. + +```js +assert.deepEqual(monsterHealthText, document.querySelector('#monsterHealth')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +--fcc-editable-region-- +const button1 = document.querySelector("#button1"); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md new file mode 100644 index 00000000000..a2ce162457c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md @@ -0,0 +1,100 @@ +--- +id: 5ddb965c65d27e1512d44d9a +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. + +In JavaScript, you can access the DOM by referencing the global `document` object. + +To view the DOM, log it to the console with `console.log(document)`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast
+ Lunch
+ Dinner +
+ + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md new file mode 100644 index 00000000000..aab244748d6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md @@ -0,0 +1,114 @@ +--- +id: 5ddb965c65d27e1512d44d9b +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +In our HTML document, we have a form element with an `id` attribute: `
` + +To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. + +The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+ +

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + + +
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md new file mode 100644 index 00000000000..31afd7303fc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md @@ -0,0 +1,119 @@ +--- +id: 5ddb965c65d27e1512d44d9c +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. + +Forms have an `onsubmit` event that can execute a function when the form is submitted. + +For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. + +Assign a function named `calculate` to the `onsubmit` event of your form. + +You will create the `calculate` function later. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md new file mode 100644 index 00000000000..bcd3b1bc287 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md @@ -0,0 +1,112 @@ +--- +id: 5ddb965c65d27e1512d44d9d +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: + +```js +function square() {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(typeof calculate === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md new file mode 100644 index 00000000000..8a02a67b570 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md @@ -0,0 +1,115 @@ +--- +id: 5ddb965c65d27e1512d44d9e +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. + +Here is an example of an empty function called `square` that takes a `number` as a parameter: + +```js +function square(number) {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md new file mode 100644 index 00000000000..0cd5d1525fd --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md @@ -0,0 +1,113 @@ +--- +id: 5ddb965c65d27e1512d44d9f +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. + +Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md new file mode 100644 index 00000000000..ee8e8356f0d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md @@ -0,0 +1,122 @@ +--- +id: 5ddb965c65d27e1512d44da0 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. + +To access elements with a certain class name, we use the `getElementsByClassName()` method. + +Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md new file mode 100644 index 00000000000..9b80e0f827c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md @@ -0,0 +1,119 @@ +--- +id: 5ddb965c65d27e1512d44da1 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md new file mode 100644 index 00000000000..c5a2856f2c3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md @@ -0,0 +1,121 @@ +--- +id: 5ddb965c65d27e1512d44da2 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md new file mode 100644 index 00000000000..40f6a846fd5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md @@ -0,0 +1,116 @@ +--- +id: 5ddb965c65d27e1512d44da3 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. + +# --hints-- + +See description above for instructions. + +```js +assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md new file mode 100644 index 00000000000..725bff25987 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md @@ -0,0 +1,117 @@ +--- +id: 5ddb965c65d27e1512d44da4 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md new file mode 100644 index 00000000000..fead88a0598 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md @@ -0,0 +1,129 @@ +--- +id: 5ddb965c65d27e1512d44da5 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. + +The `map()` method allows us to do exactly that. + +Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .toString() + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md new file mode 100644 index 00000000000..714497fddbb --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md @@ -0,0 +1,127 @@ +--- +id: 5ddb965c65d27e1512d44da6 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Now we need to provide a function to `map()` that will be performed on each item of the array. + +This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: + +```js +function(meal){} +``` + +Enter in the above function as an argument in between the parentheses of the `.map()` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md new file mode 100644 index 00000000000..7d58167b80c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md @@ -0,0 +1,125 @@ +--- +id: 5ddb965c65d27e1512d44da7 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. + +If you want, console log `total` to see what results you are getting. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md new file mode 100644 index 00000000000..4a199951818 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md @@ -0,0 +1,123 @@ +--- +id: 5ddb965c65d27e1512d44da8 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md new file mode 100644 index 00000000000..6058cea614a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md @@ -0,0 +1,122 @@ +--- +id: 5ddb965c65d27e1512d44da9 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md new file mode 100644 index 00000000000..46dfade8b55 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md @@ -0,0 +1,123 @@ +--- +id: 5ddb965c65d27e1512d44daa +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. + +Chain the `reduce()` method to the `Array.from()` expression. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md new file mode 100644 index 00000000000..065b5dce513 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md @@ -0,0 +1,139 @@ +--- +id: 5ddb965c65d27e1512d44dab +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: + +```js +function(accumulator, currentValue) { /* code to run */ } +``` + +or using arrow functions: + +```js +(accumulator, currentValue) => { /* code to run */ } +``` + +Insert the above callback function as an argument in the `.reduce()` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md new file mode 100644 index 00000000000..448c7702610 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md @@ -0,0 +1,139 @@ +--- +id: 5ddb965c65d27e1512d44dac +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. + +Here is an example of a `reduce()` method with an empty object as its initial value: + +```js +arr.reduce((accumulator, currentValue) => { + /* code to run */ +}, {}); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md new file mode 100644 index 00000000000..4134f0401a2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md @@ -0,0 +1,147 @@ +--- +id: 5ddb965c65d27e1512d44dad +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. + +We can use the reduce function as follows: + +```js +arr.reduce((accumulator, currentValue) => { + return accumulator + currentValue; +}, 0); +``` + +At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. + +At `arr[1]`, the function is `(1, 3) => 1 + 3`, + +Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. + +In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md new file mode 100644 index 00000000000..c9d4f5bd8ad --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md @@ -0,0 +1,136 @@ +--- +id: 5e302e80e003129199103c78 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` + +You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. + +When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md new file mode 100644 index 00000000000..b36ed2d97b6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md @@ -0,0 +1,139 @@ +--- +id: 5e302e8ce003129199103c79 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Now let's simplify the `reduce()` callback function by refactoring it. + +Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. + +So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. + +Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md new file mode 100644 index 00000000000..8825fbe6dd0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md @@ -0,0 +1,133 @@ +--- +id: 5ddb965c65d27e1512d44dae +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. + +Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. + +If you inspect the Female radio button you will notice its id: `` + +Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md new file mode 100644 index 00000000000..1e19c715fcf --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md @@ -0,0 +1,131 @@ +--- +id: 5ddb965c65d27e1512d44daf +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` + +Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md new file mode 100644 index 00000000000..21d83417535 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md @@ -0,0 +1,141 @@ +--- +id: 5ddb965c65d27e1512d44db0 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. + +For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: + +```js +if (5 - 3 === 4) { + return 'Yes'; +} else { + return 'No'; +} +``` + +`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md new file mode 100644 index 00000000000..abe960e3120 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md @@ -0,0 +1,129 @@ +--- +id: 5ddb965c65d27e1512d44db1 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now that we have `total` and `maxCalories`, we need to find out the difference between them. + +Create a variable named `difference` and set it equal to `total - maxCalories` + +# --hints-- + +See description above for instructions. + +```js +assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md new file mode 100644 index 00000000000..ad3abc0bfe5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md @@ -0,0 +1,141 @@ +--- +id: 5ddb965c65d27e1512d44db2 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. + +To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). + +If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. + +Use the same ternary syntax that you used to determine `maxCalories`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md new file mode 100644 index 00000000000..2dbdd8b547b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md @@ -0,0 +1,143 @@ +--- +id: 5ddb965c65d27e1512d44db3 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
`. + +We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. + +Create a variable named `output` and set it equal to this division element with the `id` of `output`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md new file mode 100644 index 00000000000..87062f28e7f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db4 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Now it's time to create the HTML elements that we will add inside of `output`. + +To create an element, use `createElement()`. For example: + +```js +const myHeading1 = document.createElement('h1') +``` + +Create an `h3` element and assign it to a variable named `result`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md new file mode 100644 index 00000000000..90ad3c91cb4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md @@ -0,0 +1,154 @@ +--- +id: 5ddb965c65d27e1512d44db5 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Next, we will create a text node that we will later append to the `result` element. + +JavaScript has a function called `createTextNode()` to accomplish this. For example: + +```js +const myText = document.createTextNode("Hello world!") +``` + +Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md new file mode 100644 index 00000000000..b93248efe69 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db6 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +We can now use the `difference` variable that we created above. + +Insert the `difference` variable inside the parentheses of `.createTextNode()` + +If you want to see what the text currently looks like, try `console.log(resultText)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md new file mode 100644 index 00000000000..fd08248b5f0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44db7 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Notice how if `total` is less than `maxCalories`, `difference` is a negative number. + +We want to show the absolute value of the difference so it displays "300" rather than "-300". + +Wrap the `difference` in a `Math.abs()` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md new file mode 100644 index 00000000000..f066a2b3607 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md @@ -0,0 +1,149 @@ +--- +id: 5ddb965c65d27e1512d44db8 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md new file mode 100644 index 00000000000..d2e8c9a31c3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md @@ -0,0 +1,153 @@ +--- +id: 5ddb965c65d27e1512d44db9 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next we want to add the text from the `surplusOrDeficit` variable that we previously created. + +Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md new file mode 100644 index 00000000000..1311c2ac849 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md @@ -0,0 +1,161 @@ +--- +id: 5ddb965c65d27e1512d44dba +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. + +Some people consider this a little cumbersome and prefer to use template literals instead. + +Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. + +For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. + +Convert the data inside of `createTextNode()` to be a template literal. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md new file mode 100644 index 00000000000..923d7d02e23 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md @@ -0,0 +1,153 @@ +--- +id: 5ddb965c65d27e1512d44dbb +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: + +```js +result.appendChild(resultText); +``` + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md new file mode 100644 index 00000000000..09da32b6cb5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md @@ -0,0 +1,154 @@ +--- +id: 5ddb965c65d27e1512d44dbc +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Similarly, append the `result` to the `output` element with the `appendChild()` method. + +Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md new file mode 100644 index 00000000000..ccb8660bf13 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md @@ -0,0 +1,159 @@ +--- +id: 5ddb965c65d27e1512d44dbd +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Next, let's create and add a horizontal rule (`hr`) element to the output. + +Create an `hr` element and assign it to a variable named `line`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md new file mode 100644 index 00000000000..e0f9bd9c47c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md @@ -0,0 +1,158 @@ +--- +id: 5ddb965c65d27e1512d44dbe +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add the `line` to the `output` element using the `appendChild()` method. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md new file mode 100644 index 00000000000..4c4b069fb43 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md @@ -0,0 +1,167 @@ +--- +id: 5ddb965c65d27e1512d44dbf +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Let's create a few more HTML elements to add to the `output`. + +Create an `h4` element and assign it to a variable named `recommended`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md new file mode 100644 index 00000000000..0becd375fa5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md @@ -0,0 +1,170 @@ +--- +id: 5ddb965c65d27e1512d44dc0 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Create a text node and assign it to a variable named `recommendedText`. + +This is similar to how your created the `resultText` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md new file mode 100644 index 00000000000..fd2d846ab52 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md @@ -0,0 +1,175 @@ +--- +id: 5ddb965c65d27e1512d44dc1 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. + +Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". + +This is similar to template literal syntax previously used to create `resultText`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md new file mode 100644 index 00000000000..9e9d9c9c3f2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md @@ -0,0 +1,175 @@ +--- +id: 5ddb965c65d27e1512d44dc2 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Append the `recommendedText` node to the `recommended` element. + +This is similar to how the `resultText` is appended to `result` previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md new file mode 100644 index 00000000000..9264e8ac9cf --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md @@ -0,0 +1,174 @@ +--- +id: 5ddb965c65d27e1512d44dc3 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Append the `recommended` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md new file mode 100644 index 00000000000..0fd8978f093 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5ddb965c65d27e1512d44dc4 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. + +Create an `h4` element and assign it to a variable named `consumed`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md new file mode 100644 index 00000000000..6bb2536f422 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md @@ -0,0 +1,192 @@ +--- +id: 5ddb965c65d27e1512d44dc5 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. + +For example: + +```js +consumed.innerHTML = `Hello world`; +``` + +Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md new file mode 100644 index 00000000000..29d043f4c6e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md @@ -0,0 +1,182 @@ +--- +id: 5ddb965c65d27e1512d44dc6 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Append the `consumed` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md new file mode 100644 index 00000000000..c34dcad8f68 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5ddb965c65d27e1512d44dc7 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Now it's time to add some styling which can be added directly as attributes or classes. + +In our CSS file, we have a styling rule for any elements with the class name `green-text`. + +On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. + +Now if you submit the form again and inspect the `result` element, you will see it as `

` and notice that the text is now green. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md new file mode 100644 index 00000000000..7298971ffec --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5ddb965c65d27e1512d44dc8 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. + +For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. + +Set the `class` attribute of the `output` element equal to a class named `bordered-class`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md new file mode 100644 index 00000000000..1b0bd348910 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md @@ -0,0 +1,199 @@ +--- +id: 5ddb965c65d27e1512d44dc9 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. + +Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. + +The `calculate()` function is now finished! + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md new file mode 100644 index 00000000000..56bbb142804 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md @@ -0,0 +1,206 @@ +--- +id: 5ddb965c65d27e1512d44dca +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. + +In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: + +```html + + + + +
+

+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md new file mode 100644 index 00000000000..db8f9bc95c1 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5ddb965c65d27e1512d44dcb +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +We want a function to run every time the user clicks the "Add Entry" button. + +Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: + +```js +function() {} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md new file mode 100644 index 00000000000..886f041422c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md @@ -0,0 +1,203 @@ +--- +id: 5ddb965c65d27e1512d44dcc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Inside the function, create an `input` document element and assign it to a variable named `foodInput`. + +This is similar to how you created the `result` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md new file mode 100644 index 00000000000..6860d68731d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md @@ -0,0 +1,204 @@ +--- +id: 5ddb965c65d27e1512d44dcd +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Set the `placeholder` property of the `foodInput` equal to `'food name'`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md new file mode 100644 index 00000000000..89e37a9f626 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md @@ -0,0 +1,210 @@ +--- +id: 5ddb965c65d27e1512d44dce +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. + +In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. + +Add the class name `food-control` to the `foodInput` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md new file mode 100644 index 00000000000..e0ab30e27b5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md @@ -0,0 +1,214 @@ +--- +id: 5ddb965c65d27e1512d44dcf +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Notice that parent container of all of the inputs has an `id` of `entries`: `
`. + +Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. + +This is similar to the other `appendChild()` methods that you have used previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md new file mode 100644 index 00000000000..ea1faf6c59c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md @@ -0,0 +1,211 @@ +--- +id: 5ddb965c65d27e1512d44dd0 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md new file mode 100644 index 00000000000..594af428356 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md @@ -0,0 +1,218 @@ +--- +id: 5ddb965c65d27e1512d44dd1 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. + +This is similar to how to set the class of the `output` element previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md new file mode 100644 index 00000000000..962a0309894 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md @@ -0,0 +1,220 @@ +--- +id: 5ddb965c65d27e1512d44dd2 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +The `calorieInput` element should only accept numbers that are 0 or above. + +Set the `min` attribute of `calorieInput` to `0`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md new file mode 100644 index 00000000000..eac60b49fce --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md @@ -0,0 +1,220 @@ +--- +id: 5ddb965c65d27e1512d44dd3 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. + +We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md new file mode 100644 index 00000000000..7ffb7021744 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md @@ -0,0 +1,222 @@ +--- +id: 5ddb965c65d27e1512d44dd4 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. + +To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md new file mode 100644 index 00000000000..8e15285d2a9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md @@ -0,0 +1,226 @@ +--- +id: 5ddb965c65d27e1512d44dd5 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. + +The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md new file mode 100644 index 00000000000..df36314c4ae --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md @@ -0,0 +1,230 @@ +--- +id: 5ddb965c65d27e1512d44dd6 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. + +Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md new file mode 100644 index 00000000000..1e5b3e9b048 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md @@ -0,0 +1,226 @@ +--- +id: 5ddb965c65d27e1512d44dd7 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. + +# --hints-- + +See description above for instructions. + +```js +assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md new file mode 100644 index 00000000000..7a941b6559c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md @@ -0,0 +1,238 @@ +--- +id: 5ddb965c65d27e1512d44dd8 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Create a variable named `clearOutput` and set it equal to a blank arrow function: + +```js +const clearOutput = () => {} +``` + +This is similar to `function clearOutput () {}`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof clearOutput === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md new file mode 100644 index 00000000000..e6a2d2c6337 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md @@ -0,0 +1,243 @@ +--- +id: 5ddb965c65d27e1512d44dd9 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +We need to remove the contents inside of element with the `id` of `output`. + +In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md new file mode 100644 index 00000000000..f8984120835 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md @@ -0,0 +1,250 @@ +--- +id: 5ddb965c65d27e1512d44dda +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. + +Remove the `bordered-class` class. For example: + +```js +document.getElementById('my-div').classList.remove('my-class') +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md new file mode 100644 index 00000000000..93a258c395b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md @@ -0,0 +1,243 @@ +--- +id: 5ddb965c65d27e1512d44ddb +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. + +In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. + +# --hints-- + +See description above for instructions. + +```js +assert(calculate.toString().match(/clearOutput\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md new file mode 100644 index 00000000000..6a07e9aa83b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md @@ -0,0 +1,244 @@ +--- +id: 5ddb965c65d27e1512d44ddc +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof clearForm === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md new file mode 100644 index 00000000000..88284a00280 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md @@ -0,0 +1,259 @@ +--- +id: 5ddb965c65d27e1512d44ddd +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. + +Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. + +This is similar to how you declared the `total` variable previously in the `calculate` method. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md new file mode 100644 index 00000000000..9cc201d5194 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md @@ -0,0 +1,257 @@ +--- +id: 5ddb965c65d27e1512d44dde +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. + +Add `foodInputs.forEach()`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md new file mode 100644 index 00000000000..8044dac1e60 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md @@ -0,0 +1,263 @@ +--- +id: 5ddb965c65d27e1512d44ddf +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +We need to provide a callback function in the parentheses of `forEach()`. + +This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. + +In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md new file mode 100644 index 00000000000..dd34b193b4c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md @@ -0,0 +1,271 @@ +--- +id: 5ddb965c65d27e1512d44de0 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. + +Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. + +This is similar to how you declared the `foodInputs` variable previously. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md new file mode 100644 index 00000000000..652c8f99281 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md @@ -0,0 +1,269 @@ +--- +id: 5ddb965c65d27e1512d44de1 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md new file mode 100644 index 00000000000..b3cf00545fa --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md @@ -0,0 +1,277 @@ +--- +id: 5ddb965c65d27e1512d44de2 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. + +Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md new file mode 100644 index 00000000000..ead4dfe0e77 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md @@ -0,0 +1,185 @@ +--- +id: 5ddb965c65d27e1512d44de3 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Congratulations! Have fun playing with your completed calorie counter. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md new file mode 100644 index 00000000000..08bc2a4aa43 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md @@ -0,0 +1,78 @@ +--- +id: 5d79253297c0ebb149ea9fed +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +In functional programming, we prefer immutable values over mutable values. + +Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. + +Start by creating an empty `infixToFunction` object using `const`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md new file mode 100644 index 00000000000..3159f1d2410 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md @@ -0,0 +1,80 @@ +--- +id: 5d7925323be8848dbc58a07a +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md new file mode 100644 index 00000000000..c5dbbab705c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md @@ -0,0 +1,84 @@ +--- +id: 5d792532f631702ae6d23e11 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Now return the sum of `x` and `y` using the `return` keyword. + +# --hints-- + +See description above for instructions. + +```js +assert(add(1, 2) === 3 && add(100, 2000) === 2100); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md new file mode 100644 index 00000000000..0a9d327d798 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md @@ -0,0 +1,88 @@ +--- +id: 5d7925329445167ecc2ac9c9 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. + +Assign `add` to a new variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md new file mode 100644 index 00000000000..4e85d64fbe2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md @@ -0,0 +1,94 @@ +--- +id: 5d792532b07918c3a5904913 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: + +```js +function(x) { + return x +} +``` + +First, remove the `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md new file mode 100644 index 00000000000..a9aa387addd --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md @@ -0,0 +1,94 @@ +--- +id: 5d792533cc8b18b6c133edc7 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: + +```js +const fn = function(x) { + return x; +} + +fn(); +``` + +Assign the anonymous function to the variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md new file mode 100644 index 00000000000..68c44b16619 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md @@ -0,0 +1,90 @@ +--- +id: 5d7925337954ed57a565a135 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. + +Rewrite `addVar` using ES6's arrow syntax: + +```js +const fn = (x, y) => x; +``` + +Note that the value is returned implicitly. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md new file mode 100644 index 00000000000..676f6c6f4ff --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md @@ -0,0 +1,82 @@ +--- +id: 5d79253352e33dd59ec2f6de +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Add the key `+` to `infixToFunction` and assign it the value `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(infixToFunction['+'].toString() === addVar.toString()); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md new file mode 100644 index 00000000000..c44846417a5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md @@ -0,0 +1,84 @@ +--- +id: 5d792533d31e4f7fad33011d +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md new file mode 100644 index 00000000000..2096072d738 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md @@ -0,0 +1,82 @@ +--- +id: 5d792533e7707b9645d7b540 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Remove the now redundant `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof addVar === 'undefined'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md new file mode 100644 index 00000000000..526e706eb08 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md @@ -0,0 +1,87 @@ +--- +id: 5d79253378595ec568f70ab6 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Add similar definitions for `-`, `*` and `/` in `infixToFunction`. + +# --hints-- + +See description above for instructions. + +```js +assert( + infixToFunction['-'](10, 2) === 8 && + infixToFunction['*'](10, 10) === 100 && + infixToFunction['/'](100, 10) === 10 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md new file mode 100644 index 00000000000..37432637ac6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md @@ -0,0 +1,92 @@ +--- +id: 5d7925330918ae4a2f282e7e +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md new file mode 100644 index 00000000000..3d09b3967f2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md @@ -0,0 +1,98 @@ +--- +id: 5d792533ed00e75d129e1b18 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). + +Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. + +This is how you would pass the `-` function: + +```js +str.replace(regex, infixToFunction["-"]) +``` + +# --hints-- + +See description above for instructions. + +```js +assert(infixEval('ab', /(a)b/) === 'aba'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md new file mode 100644 index 00000000000..0926459ef14 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md @@ -0,0 +1,97 @@ +--- +id: 5d792533a5c42fb4d1a4b70d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md new file mode 100644 index 00000000000..23968d2e070 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md @@ -0,0 +1,102 @@ +--- +id: 5d79253358e8f646cbeb2bb0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Change the `"+"` in the call to `infixToFunction` to `fn`. + +`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md new file mode 100644 index 00000000000..f3dd1211e6a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md @@ -0,0 +1,104 @@ +--- +id: 5d792533bb38fab70b27f527 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". + +Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). + +# --hints-- + +See description above for instructions. + +```js +const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; +assert( + infixEval('23+35', regex) === '58' && + infixEval('100-20', regex) === '80' && + infixEval('10*10', regex) === '100' && + infixEval('120/6', regex) === '20' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md new file mode 100644 index 00000000000..e295114e777 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md @@ -0,0 +1,100 @@ +--- +id: 5d79253386060ed9eb04a070 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. + +To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. + +Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md new file mode 100644 index 00000000000..1af15a10b8e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md @@ -0,0 +1,103 @@ +--- +id: 5d792533717672657b81aa69 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +When defining an arrow function with a single argument, the parentheses can be omitted: + +```js +const greeting = name => `Hello !`; +``` + +Define a function `highPrecedence` which takes a single argument `str` and returns it. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('a') === 'a'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md new file mode 100644 index 00000000000..5c2d8560932 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md @@ -0,0 +1,110 @@ +--- +id: 5d7925335ab63018dcec11fe +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Arrow functions can have multiple statements: + +```js +const fn = (x, y) => { + const result = x + y; + return result; // explicit return statement required +}; +``` + +Use this syntax for the `highPrecedence` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md new file mode 100644 index 00000000000..1ddd40ce5d8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md @@ -0,0 +1,105 @@ +--- +id: 5d7925330f300c342315066d +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md new file mode 100644 index 00000000000..3bfba3454a9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md @@ -0,0 +1,107 @@ +--- +id: 5d792533aa6443215c9b16bf +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md new file mode 100644 index 00000000000..333b8bcb122 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md @@ -0,0 +1,120 @@ +--- +id: 5d7925334c5e22586dd72962 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The ternary operator has the following syntax: + +```js +const result = condition ? valueIfTrue : valueIfFalse; +const result = 1 === 1 ? 1 : 0; // 1 +const result = 9 > 10 ? "Yes" : "No"; // "No" +``` + +Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2') === '' && + highPrecedence('2+2') === '2+2' && + code.includes('?') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md new file mode 100644 index 00000000000..c5f666b8a05 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md @@ -0,0 +1,114 @@ +--- +id: 5d79253307ecd49e030bdcd1 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. + +Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2*2') === '8' && + highPrecedence('2*2') === '4' && + highPrecedence('2+2') === '2+2' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md new file mode 100644 index 00000000000..c837d8e94e1 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md @@ -0,0 +1,112 @@ +--- +id: 5d792534257122211d3043af +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. + +# --hints-- + +See description above for instructions. + +```js +assert(spreadsheetFunctions['']('x') === 'x'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md new file mode 100644 index 00000000000..58109dce7a4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md @@ -0,0 +1,120 @@ +--- +id: 5d7925346f4f2da6df4354a6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md new file mode 100644 index 00000000000..313db4427d6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md @@ -0,0 +1,128 @@ +--- +id: 5d792534cac2dbe0a719ea7a +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set `noHigh` to `highPrecedence(str)` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md new file mode 100644 index 00000000000..bc94c78c155 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md @@ -0,0 +1,131 @@ +--- +id: 5d792534857332d07ccba3ad +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md new file mode 100644 index 00000000000..7972802a8b8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md @@ -0,0 +1,133 @@ +--- +id: 5d792534d586ef495ea9df90 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Set `str2` to `infixEval(noHigh, infix)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md new file mode 100644 index 00000000000..f957c47d628 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md @@ -0,0 +1,134 @@ +--- +id: 5d79253410532e13d13fe574 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + applyFn + .toString() + .replace(/\s/g, '') + .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md new file mode 100644 index 00000000000..42b80301fc6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md @@ -0,0 +1,138 @@ +--- +id: 5d7925342415527083bd6667 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: + +```js +"a b c".split(" "); // ["a", "b", "c"]; +``` + +Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md new file mode 100644 index 00000000000..33e85a097cc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md @@ -0,0 +1,142 @@ +--- +id: 5d792534c3d26890ac1484d4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: + +```js +[1, 2, 3].map(x => x + 1); // [2, 3, 4] +``` + +In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md new file mode 100644 index 00000000000..abb91060f5e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md @@ -0,0 +1,139 @@ +--- +id: 5d792534b92f3d1cd4410ce3 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md new file mode 100644 index 00000000000..bb2f8da03a5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md @@ -0,0 +1,140 @@ +--- +id: 5d7925341193948dfe6d76b4 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md new file mode 100644 index 00000000000..f32c582d3ef --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md @@ -0,0 +1,141 @@ +--- +id: 5d792534cf81365cfca58794 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md new file mode 100644 index 00000000000..a460b595da1 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md @@ -0,0 +1,139 @@ +--- +id: 5d7925348ee084278ff15556 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. + +Now return `str2.replace(regex, "")` at the end of `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md new file mode 100644 index 00000000000..45e848ecbeb --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md @@ -0,0 +1,142 @@ +--- +id: 5d7925348a6a41c32f7a4e3e +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md new file mode 100644 index 00000000000..7394c7c6472 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md @@ -0,0 +1,150 @@ +--- +id: 5d792534408c5be896b0a46e +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. + +Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md new file mode 100644 index 00000000000..c86fe809104 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md @@ -0,0 +1,146 @@ +--- +id: 5d792534f0eda837510e9192 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md new file mode 100644 index 00000000000..bfa91d4503f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md @@ -0,0 +1,150 @@ +--- +id: 5d7925346b911fce161febaf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md new file mode 100644 index 00000000000..24d94216931 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md @@ -0,0 +1,158 @@ +--- +id: 5d79253483eada4dd69258eb +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +`range` should set `arr` to `[start]` and should then return `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constarr=[start]') && + JSON.stringify(range(1)) === '[1]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md new file mode 100644 index 00000000000..4307ef2889a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md @@ -0,0 +1,157 @@ +--- +id: 5d7925342b2b993ef18cd45f +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md new file mode 100644 index 00000000000..0fa8e6fe0fb --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md @@ -0,0 +1,170 @@ +--- +id: 5d7925341747ad42b12f8e68 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. + +The `concat` method returns a new array instead of modifying an existing one: + +```js +[1,2,3].concat(4); // [1, 2, 3, 4] +[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] +``` + +Use `concat` instead of `push` to return the result of adding `end` to `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(1, 2)) === '[1,2]' && + code.includes('concat') && + !code.includes('push') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md new file mode 100644 index 00000000000..448578598f5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md @@ -0,0 +1,163 @@ +--- +id: 5d792535b0b3c198ee3ed6f9 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The `concat` method can also accept arrays: + +```js +[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] +[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] +``` + +Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md new file mode 100644 index 00000000000..6e89d44a236 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md @@ -0,0 +1,158 @@ +--- +id: 5d7925357a0533eb221b005d +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('arr') && + code.replace(/\s/g, '').includes('[start].concat([end])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md new file mode 100644 index 00000000000..0d876da26b6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md @@ -0,0 +1,157 @@ +--- +id: 5d792535591db67ee15b4106 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(3, 2)) === '[]' && + JSON.stringify(range(1, 3)) === '[1,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md new file mode 100644 index 00000000000..ee94e71d4a4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md @@ -0,0 +1,154 @@ +--- +id: 5d792535f1f7adf77de5831d +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md new file mode 100644 index 00000000000..497b63c634b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md @@ -0,0 +1,159 @@ +--- +id: 5d7925353d2c505eafd50cd9 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Remove the curly braces and `return` keyword from `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md new file mode 100644 index 00000000000..862a0002f2f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md @@ -0,0 +1,154 @@ +--- +id: 5d79253539b5e944ba3e314c +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md new file mode 100644 index 00000000000..9845839bbeb --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md @@ -0,0 +1,156 @@ +--- +id: 5d792535a4f1cbff7a8b9a0b +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Make `charRange` return `range(start, end)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md new file mode 100644 index 00000000000..43167394a7b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md @@ -0,0 +1,156 @@ +--- +id: 5d792535e3304f15a8890162 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md new file mode 100644 index 00000000000..f5bb024255e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md @@ -0,0 +1,160 @@ +--- +id: 5d792535a40ea5ac549d6804 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md new file mode 100644 index 00000000000..8369854b752 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md @@ -0,0 +1,159 @@ +--- +id: 5d7925358c220e5b2998909e +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Now, pass `x` to `String.fromCharCode` in the arrow function. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md new file mode 100644 index 00000000000..6253e20d545 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md @@ -0,0 +1,173 @@ +--- +id: 5d7925357729e183a49498aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md new file mode 100644 index 00000000000..03ceaf96068 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md @@ -0,0 +1,176 @@ +--- +id: 5d79253555aa652afbb68086 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md new file mode 100644 index 00000000000..27b4b66f7f2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md @@ -0,0 +1,176 @@ +--- +id: 5d79253582be306d339564f6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md new file mode 100644 index 00000000000..72223dddb2c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md @@ -0,0 +1,176 @@ +--- +id: 5d7925352047e5c54882c436 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md new file mode 100644 index 00000000000..1870ab8b951 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md @@ -0,0 +1,177 @@ +--- +id: 5d79253568e441c0adf9db9f +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md new file mode 100644 index 00000000000..b394d603ed4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md @@ -0,0 +1,183 @@ +--- +id: 5d7925356ab117923b80c9cd +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md new file mode 100644 index 00000000000..e79d2b6f857 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md @@ -0,0 +1,183 @@ +--- +id: 5d792535e54a8cd729a0d708 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md new file mode 100644 index 00000000000..3d6a5a955b7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md @@ -0,0 +1,187 @@ +--- +id: 5d7925353b307724a462b06b +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Finally, return `fn("A")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md new file mode 100644 index 00000000000..994e931f57f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md @@ -0,0 +1,189 @@ +--- +id: 5d792536735f71d746ee5d99 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. + +Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md new file mode 100644 index 00000000000..b06f86f5495 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md @@ -0,0 +1,184 @@ +--- +id: 5d792536ad340d9dff2e4a96 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Now, remove the curly braces and return statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md new file mode 100644 index 00000000000..d1492aa5cbf --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md @@ -0,0 +1,183 @@ +--- +id: 5d7925369614afd92d01fed5 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md new file mode 100644 index 00000000000..8d17549a291 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md @@ -0,0 +1,182 @@ +--- +id: 5d792536504e68254fe02236 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. + +Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md new file mode 100644 index 00000000000..1c388711e2f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md @@ -0,0 +1,186 @@ +--- +id: 5d792536c8d2f0fdfad768fe +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +You can add more arguments by simply adding another arrow with another argument name: + +```js +const manyArguments = a => b => c => d => [a, b, c, d] +``` + +Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md new file mode 100644 index 00000000000..45e6af501cc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md @@ -0,0 +1,182 @@ +--- +id: 5d79253639028b8ec56afcda +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md new file mode 100644 index 00000000000..19bbc068cd3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md @@ -0,0 +1,192 @@ +--- +id: 5d792536834f2fd93e84944f +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +You call curried functions like this: + +```js +const result = add(1)(2); +``` + +Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md new file mode 100644 index 00000000000..e220cf656e5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md @@ -0,0 +1,186 @@ +--- +id: 5d792536ddff9ea73c90a994 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. + +Change `x => elemValue(n)(x)` to `elemValue(n)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md new file mode 100644 index 00000000000..eaff17e3511 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md @@ -0,0 +1,184 @@ +--- +id: 5d7925361596f84067904f7f +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('const fn') && + code.includes('varRangeExpanded') && + evalFormula('A1:J133') === '3' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md new file mode 100644 index 00000000000..03ec1f65ba2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md @@ -0,0 +1,188 @@ +--- +id: 5d792536dd8a4daf255488ac +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md new file mode 100644 index 00000000000..b1139d99d92 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md @@ -0,0 +1,190 @@ +--- +id: 5d792536449c73004f265fb1 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md new file mode 100644 index 00000000000..a481e918c67 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md @@ -0,0 +1,192 @@ +--- +id: 5d79253685fc69b8fe60a0d2 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. + +This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md new file mode 100644 index 00000000000..64e48966f02 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md @@ -0,0 +1,188 @@ +--- +id: 5d792536dc6e3ab29525de9e +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md new file mode 100644 index 00000000000..57da365160d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md @@ -0,0 +1,190 @@ +--- +id: 5d792536cfd0fd893c630abb +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.includes('varRegex') && + code.includes('varExpanded') && + evalFormula('aC12bc') === 'abc' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md new file mode 100644 index 00000000000..2dc9ec5c8ab --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md @@ -0,0 +1,197 @@ +--- +id: 5d7925366a5ff428fb483b40 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md new file mode 100644 index 00000000000..0516f1f77e6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md @@ -0,0 +1,195 @@ +--- +id: 5d7925365d4035eeb2e395fd +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md new file mode 100644 index 00000000000..a1022f45c6a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md @@ -0,0 +1,200 @@ +--- +id: 5d7925364c106e9aaf05a16f +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. + +Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(evalFormula('(2+2)*2') === '8'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md new file mode 100644 index 00000000000..5617221e798 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md @@ -0,0 +1,208 @@ +--- +id: 5d792536970cd8e819cc8a96 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +You can define arrow functions without arguments: + +```js +const two = () => 2; +``` + +Define an empty arrow function without arguments and assign it to `window.onload`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('window.onload=()=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md new file mode 100644 index 00000000000..06b401c7e8e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md @@ -0,0 +1,211 @@ +--- +id: 5d792536e33baeaa60129e0a +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md new file mode 100644 index 00000000000..59443f50dc9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md @@ -0,0 +1,217 @@ +--- +id: 5d7925379e2a488f333e2d43 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Now define a function `createLabel` which takes an argument `name` and has an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md new file mode 100644 index 00000000000..3a3a6f126c8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md @@ -0,0 +1,220 @@ +--- +id: 5d7925379000785f6d8d9af3 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Inside `createLabel`, assign `document.createElement("div")` to `label`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md new file mode 100644 index 00000000000..a9a1dcc5726 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md @@ -0,0 +1,229 @@ +--- +id: 5d79253791391b0acddd0ac5 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Add the following code to `createLabel`: + +```js +label.className = "label"; +label.textContent = name; +container.appendChild(label); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md new file mode 100644 index 00000000000..780a9dab7fe --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md @@ -0,0 +1,225 @@ +--- +id: 5d7925373104ae5ae83f20a5 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +The `forEach` method takes a function and calls it with each element of the array. + +Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md new file mode 100644 index 00000000000..ccfac003142 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md @@ -0,0 +1,225 @@ +--- +id: 5d7925373b7127cfaeb50c26 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). + +# --hints-- + +See description above for instructions. + +```js +assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md new file mode 100644 index 00000000000..5216d89d1d9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md @@ -0,0 +1,230 @@ +--- +id: 5d792537cb3a5cd6baca5e1a +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md new file mode 100644 index 00000000000..544000db907 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md @@ -0,0 +1,232 @@ +--- +id: 5d79253742f3313d55db981f +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md new file mode 100644 index 00000000000..bf8bee8395a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md @@ -0,0 +1,237 @@ +--- +id: 5d7925379e0180a438ce7f95 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md new file mode 100644 index 00000000000..d57aa617713 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md @@ -0,0 +1,239 @@ +--- +id: 5d792537c80984dfa5501b96 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Inside `letters.forEach`, assign `document.createElement("input")` to `input`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md new file mode 100644 index 00000000000..4568ec50b24 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md @@ -0,0 +1,251 @@ +--- +id: 5d7925377b54d8a76efb5657 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Add the following code to `letters.forEach`: + +```js +input.type = "text"; +input.id = y + x; +input.onchange = update; +container.appendChild(input); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md new file mode 100644 index 00000000000..6543d3124fb --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md @@ -0,0 +1,251 @@ +--- +id: 5d7925371398513549bb6395 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md new file mode 100644 index 00000000000..378c01975ac --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md @@ -0,0 +1,257 @@ +--- +id: 5d792537ea3eaf302bf2d359 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md new file mode 100644 index 00000000000..93968d4e378 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md @@ -0,0 +1,261 @@ +--- +id: 5d792537533b1c7843bfd029 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +The `includes` method works on a string and checks if the argument is its substring. + +Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md new file mode 100644 index 00000000000..dcc989ea328 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md @@ -0,0 +1,260 @@ +--- +id: 5d792537dc0fe84345d4f19e +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md new file mode 100644 index 00000000000..ce97294c369 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md @@ -0,0 +1,260 @@ +--- +id: 5d792537b6cadae0f4b0cda1 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. + +Use the `slice` method to log the first two letters of `value` to the console. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md new file mode 100644 index 00000000000..1eaf868ad16 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md @@ -0,0 +1,262 @@ +--- +id: 5d79253770083fb730c93a93 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. + +Change the call to `slice` to log all characters except the first instead. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md new file mode 100644 index 00000000000..cd6f2405a86 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md @@ -0,0 +1,266 @@ +--- +id: 5d792537fef76b226b63b93b +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md new file mode 100644 index 00000000000..fb91f29be96 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md @@ -0,0 +1,273 @@ +--- +id: 5d79253760fca25ccbbd8990 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +The array destructuring syntax can be used to extract values from arrays: + +```js +const [x, y] = [1, 2]; // in variables +const fn = ([x, y]) => x + y // in functions +``` + +Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && + spreadsheetFunctions['random']([1, 2]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md new file mode 100644 index 00000000000..c933b24aaac --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md @@ -0,0 +1,267 @@ +--- +id: 5d7925374321824cba309875 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( + code.replace(/\s/g, '') + ) && spreadsheetFunctions['random']([1, 1]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md new file mode 100644 index 00000000000..2a5ee766e3d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md @@ -0,0 +1,276 @@ +--- +id: 5d7925381e8565a5c50ba7f1 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. + +You can check if this is the case by comparing a call to a function with another call (with the same arguments): + +```js +console.log(f(2) === f(2)); // always true for pure functions +``` + +Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md new file mode 100644 index 00000000000..2f419cf2876 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md @@ -0,0 +1,271 @@ +--- +id: 5d7925383f1b77db7f1ff59e +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +This is (probably) false, so `random` is certainly impure. + +The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. + +Call `window.onload()` in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md new file mode 100644 index 00000000000..176257a88b5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md @@ -0,0 +1,268 @@ +--- +id: 5d792538de9fa3f298bcd5f6 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md new file mode 100644 index 00000000000..ad427105522 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md @@ -0,0 +1,270 @@ +--- +id: 5d7925385b74f69642e1fea5 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. + +Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md new file mode 100644 index 00000000000..231159b2b34 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md @@ -0,0 +1,265 @@ +--- +id: 5d7925380ea76d55b2c97d7b +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. + +Remove the `console.log` statement. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.includes('console.log')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md new file mode 100644 index 00000000000..36fd2f83b90 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md @@ -0,0 +1,267 @@ +--- +id: 5d792538be4fe331f1a6c008 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. + +But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. + +Change these calls to `""` - the function is now pure but doesn't work. + +# --hints-- + +See description above for instructions. + +```js +const nos = code.replace(/\s/g, ''); +assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md new file mode 100644 index 00000000000..4b9e711aae6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md @@ -0,0 +1,264 @@ +--- +id: 5d792538d169f33142175b95 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. + +Add an argument `cells` to `evalFormula`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md new file mode 100644 index 00000000000..39584a049ae --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md @@ -0,0 +1,272 @@ +--- +id: 5d792538e48b5a2c6e5bbe12 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md new file mode 100644 index 00000000000..1ab52bf8124 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md @@ -0,0 +1,268 @@ +--- +id: 5d7925387f3e9da5ec856dbe +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Update the recursive call to `evalFormula` by passing in `cells` as the second argument. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md new file mode 100644 index 00000000000..11e0b2d0bbc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md @@ -0,0 +1,269 @@ +--- +id: 5d79253824ae9b4a6e6f3108 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. + +# --hints-- + +See description above for instructions. + +```js +assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md new file mode 100644 index 00000000000..d4c961be237 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md @@ -0,0 +1,275 @@ +--- +id: 5d7925383f122a279f4c54ad +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The `find` method returns the first element of an array that satisfies the function passed to it. + +Chain `find` onto `cells` and pass it `cell => cell === id`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md new file mode 100644 index 00000000000..abdc6794679 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md @@ -0,0 +1,272 @@ +--- +id: 5d7925387b682e962f209269 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md new file mode 100644 index 00000000000..4baca0e6cc3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md @@ -0,0 +1,272 @@ +--- +id: 5d792538de774217b173288e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md new file mode 100644 index 00000000000..a2c5b9b1bef --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md @@ -0,0 +1,269 @@ +--- +id: 5d79253891d93585323d1f3c +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md new file mode 100644 index 00000000000..637af181723 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md @@ -0,0 +1,271 @@ +--- +id: 5d7925384e34e944ecb4612d +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md new file mode 100644 index 00000000000..d12140aa462 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md @@ -0,0 +1,273 @@ +--- +id: 5d792538631844ad0bdfb4c3 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. + +Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md new file mode 100644 index 00000000000..c966a9161ed --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md @@ -0,0 +1,279 @@ +--- +id: 5d792538e2a8d20cc580d481 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +The `slice` method can also work on arrays. + +Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md new file mode 100644 index 00000000000..5483ee8a3e9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md @@ -0,0 +1,285 @@ +--- +id: 5d792538f5004390d6678554 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +You can also pass in a negative argument to `slice` to specify that index from the end: + +```js +[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] +``` + +Use a negative index to add a function `lasttwo` which returns the last two elements of an array. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md new file mode 100644 index 00000000000..3e61d996f85 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md @@ -0,0 +1,288 @@ +--- +id: 5d792539dd4fd4c96fd85f7e +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +The `%` operator returns the remainder: + +```js +4 % 3; // 1 +5 % 3; // 2 +6 % 3; // 0 +``` + +Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. + +# --hints-- + +See description above for instructions. + +```js +assert(isEven(20) && !isEven(31)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md new file mode 100644 index 00000000000..8c4b6a9e314 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md @@ -0,0 +1,292 @@ +--- +id: 5d79253949802f8587c8bbd3 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +The `filter` method keeps only the elements of an array that satisfy the function passed to it: + +```js +[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] +``` + +Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && + code.includes('filter') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md new file mode 100644 index 00000000000..c441a9459d8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md @@ -0,0 +1,297 @@ +--- +id: 5d7925395888767e9304c082 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. + +The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. + +For example, here's how to multiply all the value in an array: + +```js +[2, 3, 4].reduce((a, x) => a * x); // 24 +``` + +Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md new file mode 100644 index 00000000000..787472aea1d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md @@ -0,0 +1,291 @@ +--- +id: 5d7925393b30099e37a34668 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +The `includes` method checks if an element is in an array. + +Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md new file mode 100644 index 00000000000..f032db3ac16 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md @@ -0,0 +1,301 @@ +--- +id: 5d7925398157757b23730fdd +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: + +```js +[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] +// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array +// now it first tries [].concat(1) which works +``` + +Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md new file mode 100644 index 00000000000..6b5714247b5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md @@ -0,0 +1,293 @@ +--- +id: 5d792539de4b9ac14dd40409 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === + '[1,3,5,7,9]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md new file mode 100644 index 00000000000..8f15f9adfd4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md @@ -0,0 +1,298 @@ +--- +id: 5d792539534f1bf991bb987f +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +ES6 introduced a shorthand object literal syntax: + +```js +const a = 10; +const myObject = { a }; +console.log(myObject); // { a: 10 } +``` + +First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. + +# --hints-- + +See description above for instructions. + +```js +assert(sum([1, 2, 3]) === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md new file mode 100644 index 00000000000..eef96f2d471 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md @@ -0,0 +1,293 @@ +--- +id: 5d7925394089b762f93ffa52 +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. + +This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. + +# --hints-- + +See description above for instructions. + +```js +assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md new file mode 100644 index 00000000000..cb3b30d8c4f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md @@ -0,0 +1,298 @@ +--- +id: 5d792539ec758d45a6900173 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. + +As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md new file mode 100644 index 00000000000..621e4cc4fbc --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md @@ -0,0 +1,308 @@ +--- +id: 5d7925398d525f61a9ff3a79 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +The spread operator allow you to pass multiple arguments instead of an array: + +```js +const arr = [1, 2, 3]; +const sum3 = (a, b, c) => a + b + c; +sum3(...arr); // 6 +``` + +Use the spread operator to add `range` to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && + code.includes('...') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md new file mode 100644 index 00000000000..8d27ee2bf76 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md @@ -0,0 +1,300 @@ +--- +id: 5d792539a222f385c5c17d2b +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Now define a `median` function which takes an argument `nums` (in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md new file mode 100644 index 00000000000..08ffbd94e4a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md @@ -0,0 +1,312 @@ +--- +id: 5d7925398a7184b41b12a0e0 +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +The `sort` method sorts an array alphabetically: + +```js +["B", "C", "A"].sort(); // ["A", "B", "C"] +``` + +Assign the sorted `nums` to `sorted` in `median`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md new file mode 100644 index 00000000000..49b025f4b1e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md @@ -0,0 +1,318 @@ +--- +id: 5d7925399afb905c34730a75 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: + +```js +[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] +``` + +If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. + +Use `sort` to sort `nums` in ascending order. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md new file mode 100644 index 00000000000..cad2f5aa466 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md @@ -0,0 +1,312 @@ +--- +id: 5d792539728d1aa7788e2c9b +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. + +You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md new file mode 100644 index 00000000000..df39b579f78 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md @@ -0,0 +1,312 @@ +--- +id: 5d79253939434a2724c0ec41 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md new file mode 100644 index 00000000000..1e4f1aca372 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md @@ -0,0 +1,311 @@ +--- +id: 5d792539b9e1d3c54d8fe94a +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Add a return statement to `median` so that it returns `isEven(length)`. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md new file mode 100644 index 00000000000..4cf66a6dd6a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md @@ -0,0 +1,316 @@ +--- +id: 5d792539b2e0bd8f9e8213e4 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. + +Note that the `middle` variable is close to the middle but is not actually the middle. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md new file mode 100644 index 00000000000..2428ff3a79d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md @@ -0,0 +1,320 @@ +--- +id: 5d792539239148965a1a59a5 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.median([1, 20, 3]) === 3 && + spreadsheetFunctions.median([27, 7, 20, 10]) === 15 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md new file mode 100644 index 00000000000..ff91ae909fd --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md @@ -0,0 +1,325 @@ +--- +id: 5d792539e1446045d0df6d28 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +The `some` method checks if any element of the array satisfies the provided testing function. + +Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.someeven([1, 5, 4, 3]) && + !spreadsheetFunctions.someeven([3, 5, 9]) && + code.includes('.some') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md new file mode 100644 index 00000000000..ddede0016d6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md @@ -0,0 +1,327 @@ +--- +id: 5d79253a2febbb77098730b9 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +The `every` method checks if all elements of an array satisfy the provided testing function. + +Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && + !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && + code.includes('.every') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md new file mode 100644 index 00000000000..c475cf8ba22 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md @@ -0,0 +1,328 @@ +--- +id: 5d79253a98bd9fdf7ce68d0a +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. + +While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. + +Replace the body of `range` with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md new file mode 100644 index 00000000000..52e294c3655 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md @@ -0,0 +1,324 @@ +--- +id: 5d79253a1e9abf29de64c177 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. + +Make `range` return an array of `undefined` with size `end - start + 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md new file mode 100644 index 00000000000..ce1e1c87c73 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md @@ -0,0 +1,327 @@ +--- +id: 5d79253a8b29d78984369e4b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +The `fill` method takes an argument and replaces all elements of the array with that argument. + +Use it on the array in `range` to replace everything with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md new file mode 100644 index 00000000000..9630c3210b7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md @@ -0,0 +1,330 @@ +--- +id: 5d79253ad297a31cbe073718 +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +The function in the `map` method can actually take a second argument: the index of the element. + +This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). + +Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md new file mode 100644 index 00000000000..7531f12a5a3 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md @@ -0,0 +1,316 @@ +--- +id: 5dc10b8b93704f41d279eb5b +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-001.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-001.md new file mode 100644 index 00000000000..737056e9343 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-001.md @@ -0,0 +1,33 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9de +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. + +First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. + +# --hints-- + +test-text + +```js +assert(//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-002.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-002.md new file mode 100644 index 00000000000..e69a56a6c39 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-002.md @@ -0,0 +1,43 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9df +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. + +# --hints-- + +test-text + +```js +assert( + /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( + code + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + + + + + + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-003.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-003.md new file mode 100644 index 00000000000..4060dac9f7c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-003.md @@ -0,0 +1,51 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e0 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the head, add a `title` of `D3 Dashboard`. + +# --hints-- + +test-text + +```js +assert( + /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-004.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-004.md new file mode 100644 index 00000000000..92d0e9e6672 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-004.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e1 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. + +# --hints-- + +test-text + +```js +const link = code.match(/]>/gi)[0]; +assert( + /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && + /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-005.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-005.md new file mode 100644 index 00000000000..126ee1afb77 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-005.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e2 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. + +# --hints-- + +test-text + +```js +assert($('div.dashboard').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-006.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-006.md new file mode 100644 index 00000000000..8d2dc0f0fc2 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-006.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-007.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-007.md new file mode 100644 index 00000000000..9c9637a79da --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-007.md @@ -0,0 +1,66 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('width') === '980px' && dashboard.css('height') === '500px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-008.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-008.md new file mode 100644 index 00000000000..f30f2278512 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-008.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e5 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('background-color') === 'rgb(255, 255, 255)' && + dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-009.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-009.md new file mode 100644 index 00000000000..a9e92dd79e5 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-009.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e6 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. + +# --hints-- + +test-text + +```js +const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; +assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-010.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-010.md new file mode 100644 index 00000000000..a5ebf98f5a0 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-010.md @@ -0,0 +1,75 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e7 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give the container some space by adding a `padding` of `100px 10px` to the `body` element. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-011.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-011.md new file mode 100644 index 00000000000..e852c01758e --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-011.md @@ -0,0 +1,81 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e8 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('display') === 'flex' && + dashboard.css('align-items') === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-012.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-012.md new file mode 100644 index 00000000000..c087db365e8 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-012.md @@ -0,0 +1,79 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e9 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[0]; +assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-013.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-013.md new file mode 100644 index 00000000000..1900674079c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-013.md @@ -0,0 +1,96 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ea +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. + +This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[1]; +assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-014.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-014.md new file mode 100644 index 00000000000..934305ffeb0 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-014.md @@ -0,0 +1,95 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9eb +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[2]; +assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-015.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-015.md new file mode 100644 index 00000000000..6972bb06c2a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-015.md @@ -0,0 +1,103 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ec +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. + +In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. + +The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. + +# --hints-- + +test-text + +```js +assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-016.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-016.md new file mode 100644 index 00000000000..c518fc0fd82 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-016.md @@ -0,0 +1,108 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ed +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. + +# --hints-- + +test-text + +```js +assert( + twitterColor === '#7cd9d1' && + tumblrColor === '#f6dd71' && + instagramColor === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-017.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-017.md new file mode 100644 index 00000000000..8537b5c634a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-017.md @@ -0,0 +1,113 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ee +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: + +```js +const variableName = d3.select('.className') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('.dashboard')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-018.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-018.md new file mode 100644 index 00000000000..e034d250e57 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-018.md @@ -0,0 +1,117 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ef +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: + +```js +const variableName = d3.select('selectedElement') + .append('elementToAdd') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('svg')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-019.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-019.md new file mode 100644 index 00000000000..71a9b118ed1 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-019.md @@ -0,0 +1,124 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. + +`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: + +```js +const variableName = d3.select('element') + .append('element') + .attr('attribute', 'value') +``` + +Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.width.value === '700'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-020.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-020.md new file mode 100644 index 00000000000..64d86709ab6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-020.md @@ -0,0 +1,116 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f1 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.height.value === '500'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-021.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-021.md new file mode 100644 index 00000000000..06bcb3f2432 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-021.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f2 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. + +Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. + +# --hints-- + +test-text + +```js +assert( + typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-022.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-022.md new file mode 100644 index 00000000000..20a021de05d --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-022.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. + +# --hints-- + +test-text + +```js +const domain = yScale.domain(); +assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-023.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-023.md new file mode 100644 index 00000000000..e7a769694bf --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-023.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. + +Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. + +Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. + +# --hints-- + +test-text + +```js +const range = yScale.range(); +assert(range.length === 2 && range[0] === 430 && range[1] === 70); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-024.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-024.md new file mode 100644 index 00000000000..bfb5cb47cf4 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-024.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f5 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. + +# --hints-- + +test-text + +```js +assert( + typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-025.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-025.md new file mode 100644 index 00000000000..0ad79254818 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-025.md @@ -0,0 +1,131 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. + +# --hints-- + +test-text + +```js +const domain = xScale.domain(); +assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-026.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-026.md new file mode 100644 index 00000000000..c2eda71b4f8 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-026.md @@ -0,0 +1,133 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f7 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. + +# --hints-- + +test-text + +```js +const range = xScale.range(); +assert(range.length === 2 && range[0] === 70 && range[1] === 630); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-027.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-027.md new file mode 100644 index 00000000000..fadf8788314 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-027.md @@ -0,0 +1,138 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f8 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. + +# --hints-- + +test-text + +```js +assert( + typeof yAxis === 'function' && + /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-028.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-028.md new file mode 100644 index 00000000000..3c6e36d9cc2 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-028.md @@ -0,0 +1,142 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f9 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. + +# --hints-- + +test-text + +```js +assert( + typeof xAxis === 'function' && + /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-029.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-029.md new file mode 100644 index 00000000000..aae1810fbf7 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-029.md @@ -0,0 +1,143 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fa +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". + +# --hints-- + +test-text + +```js +assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-030.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-030.md new file mode 100644 index 00000000000..5a8d4514367 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-030.md @@ -0,0 +1,147 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fb +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. + +# --hints-- + +test-text + +```js +assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-031.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-031.md new file mode 100644 index 00000000000..94721751a99 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fc +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. + +Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-032.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-032.md new file mode 100644 index 00000000000..1482a45c496 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-032.md @@ -0,0 +1,150 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fd +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-033.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-033.md new file mode 100644 index 00000000000..838f00a1e26 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-033.md @@ -0,0 +1,153 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fe +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 13); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-034.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-034.md new file mode 100644 index 00000000000..ffd84f411a9 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-034.md @@ -0,0 +1,156 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ff +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 22); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-035.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-035.md new file mode 100644 index 00000000000..e5afa9d8688 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-035.md @@ -0,0 +1,158 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca00 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. + +# --hints-- + +test-text + +```js +assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-036.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-036.md new file mode 100644 index 00000000000..61a26b75fff --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-036.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca01 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: + +```js +.selectAll('element') +``` + +# --hints-- + +test-text + +```js +assert( + /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-037.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-037.md new file mode 100644 index 00000000000..194e3ad318c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-037.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca02 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.transform === 'translate(-12px) rotate(-50deg)' || + index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-038.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-038.md new file mode 100644 index 00000000000..b17ce9013b1 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-038.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca03 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => index.style['text-anchor'] === 'end' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-039.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-039.md new file mode 100644 index 00000000000..2025374c7a1 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-039.md @@ -0,0 +1,173 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca04 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. + +You will add some hover effects later, so the pointer will make for a better experience. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.cursor === 'pointer' && index.style.font === '10px verdana' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-040.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-040.md new file mode 100644 index 00000000000..52d9a027fd4 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-040.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca05 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. + +The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert( + ticks[0].innerHTML === '0k' && + ticks[1].innerHTML === '1k' && + ticks[2].innerHTML === '2k' && + ticks[3].innerHTML === '3k' && + ticks[4].innerHTML === '4k' && + ticks[5].innerHTML === '5k' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-041.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-041.md new file mode 100644 index 00000000000..82a3261d9b5 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-041.md @@ -0,0 +1,171 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca06 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-042.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-042.md new file mode 100644 index 00000000000..aa8a37baf20 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-042.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca07 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. + +# --hints-- + +test-text + +```js +assert( + /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-043.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-043.md new file mode 100644 index 00000000000..a91e12f41e6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-043.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca08 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. + +# --hints-- + +test-text + +```js +assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-044.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-044.md new file mode 100644 index 00000000000..5a93e72d48f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-044.md @@ -0,0 +1,192 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca09 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: + +```js +.x(d => d.year) +``` + +You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). + +This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. + +# --hints-- + +test-text + +```js +assert( + /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-045.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-045.md new file mode 100644 index 00000000000..e07ef7245ce --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0a +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. + +In the "d function" you created, return `xScale(d.year)` instead of `d.year`. + +# --hints-- + +test-text + +```js +assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-046.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-046.md new file mode 100644 index 00000000000..9ba6b01ac8e --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-046.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0b +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. + +This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. + +These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-047.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-047.md new file mode 100644 index 00000000000..27b6eb3229d --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-047.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0c +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 3 && + /lineGraph\.append\((`|'|")path\1\)/gi.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-048.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-048.md new file mode 100644 index 00000000000..0af7e8110d7 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0d +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. + +Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". + +After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. + +# --hints-- + +test-text + +```js +assert($('svg path')[2].getAttribute('d').length === 151); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-049.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-049.md new file mode 100644 index 00000000000..880f7b5d0a6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0e +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const twitterPath = $('svg path')[2]; +assert( + twitterPath.getAttribute('stroke') === '#7cd9d1' && + twitterPath.getAttribute('stroke-width') == '3' && + twitterPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-050.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-050.md new file mode 100644 index 00000000000..21584d84adf --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-050.md @@ -0,0 +1,198 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0f +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. + +# --hints-- + +test-text + +```js +assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-051.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-051.md new file mode 100644 index 00000000000..3c1c0750188 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-051.md @@ -0,0 +1,204 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca10 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculate their values just like you did for the Twitter line. + +# --hints-- + +test-text + +```js +assert( + /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-052.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-052.md new file mode 100644 index 00000000000..74a4638e890 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca11 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculate their values just like you did for the Twitter line. + +The x values for each line will be the same, but the y values will use the data from the different platforms. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-053.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-053.md new file mode 100644 index 00000000000..746e1ab4b1a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-053.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca12 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 4 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-054.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-054.md new file mode 100644 index 00000000000..695da3fee70 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-054.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca13 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. + +# --hints-- + +test-text + +```js +assert($('svg path')[3].getAttribute('d').length === 115); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-055.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-055.md new file mode 100644 index 00000000000..a200a166f95 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-055.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca14 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const tumblrPath = $('svg path')[3]; +assert( + tumblrPath.getAttribute('stroke') === '#f6dd71' && + tumblrPath.getAttribute('stroke-width') == '3' && + tumblrPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-056.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-056.md new file mode 100644 index 00000000000..c4f75859463 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-056.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca15 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. + +# --hints-- + +test-text + +```js +assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-057.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-057.md new file mode 100644 index 00000000000..59e2b7b22ca --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-057.md @@ -0,0 +1,226 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca16 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Appropriately set the `x` values for `instagramLine` like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-058.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-058.md new file mode 100644 index 00000000000..ad99613e2db --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-058.md @@ -0,0 +1,229 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca17 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-059.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-059.md new file mode 100644 index 00000000000..fe46511da37 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-059.md @@ -0,0 +1,231 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca18 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 5 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-060.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-060.md new file mode 100644 index 00000000000..5863f052f3d --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-060.md @@ -0,0 +1,230 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca19 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. + +# --hints-- + +test-text + +```js +assert($('svg path')[4].getAttribute('d').length === 171); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-061.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-061.md new file mode 100644 index 00000000000..45e97e2ba69 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-061.md @@ -0,0 +1,239 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1a +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. + +# --hints-- + +test-text + +```js +const instagramPath = $('svg path')[4]; +assert( + instagramPath.getAttribute('stroke') === '#fd9b98' && + instagramPath.getAttribute('stroke-width') == '3' && + instagramPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-062.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-062.md new file mode 100644 index 00000000000..82eef8d81e7 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-062.md @@ -0,0 +1,247 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1b +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: + +```js +lineGraph.selectAll('twitter-circles') +``` + +`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-063.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-063.md new file mode 100644 index 00000000000..942bc905877 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-063.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1c +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Add the D3 `data` function to your selection and pass it the data array like this: + +```js +.data(data) +``` + +# --hints-- + +test-text + +```js +assert(/\.data\s*\(\s*data\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-064.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-064.md new file mode 100644 index 00000000000..db5343e098f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-064.md @@ -0,0 +1,248 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1d +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Next, chain the `enter()` function to the selection. + +The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. + +In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. + +# --hints-- + +test-text + +```js +assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-065.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-065.md new file mode 100644 index 00000000000..609632232b4 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-065.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1e +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-066.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-066.md new file mode 100644 index 00000000000..d5291b996da --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-066.md @@ -0,0 +1,250 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. + +Use the `attr` function to set the `cx` to `d => xScale(d.year)`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cx') == '70'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-067.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-067.md new file mode 100644 index 00000000000..f8b852ac2b8 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-067.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca20 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. + +As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cy') == '243.232'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-068.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-068.md new file mode 100644 index 00000000000..ad9dfcf5dfc --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-068.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca21 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('r') == '6'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-069.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-069.md new file mode 100644 index 00000000000..9d2d9c5b0b0 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-069.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca22 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[0].getAttribute('fill') === 'white' && + $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-070.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-070.md new file mode 100644 index 00000000000..e8beb17a75b --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-070.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca23 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-071.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-071.md new file mode 100644 index 00000000000..25b5c92d036 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-071.md @@ -0,0 +1,263 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca24 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-072.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-072.md new file mode 100644 index 00000000000..b5eee1874d9 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-072.md @@ -0,0 +1,268 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca25 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. + +Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 18); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-073.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-073.md new file mode 100644 index 00000000000..4d3a27e49d0 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-073.md @@ -0,0 +1,274 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca26 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('cx') == '70' && + $('svg circle')[9].getAttribute('cy') == '401.128' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-074.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-074.md new file mode 100644 index 00000000000..df1221f436d --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-074.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca27 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('r') == '6' && + $('svg circle')[9].getAttribute('fill') === 'white' && + $('svg circle')[9].getAttribute('stroke') === '#f6dd71' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-075.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-075.md new file mode 100644 index 00000000000..53c158898b0 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-075.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca28 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Set the `cursor` to `pointer` using the `style` function. + +# --hints-- + +test-text + +```js +assert($('svg circle')[9].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-076.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-076.md new file mode 100644 index 00000000000..dfef7440d25 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-076.md @@ -0,0 +1,287 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca29 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-077.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-077.md new file mode 100644 index 00000000000..5ed00425a75 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-077.md @@ -0,0 +1,288 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2a +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 27); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-078.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-078.md new file mode 100644 index 00000000000..fea82b1f06f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-078.md @@ -0,0 +1,296 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2b +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Appropriately set the `cx` and `cy` attributes for the Instagram circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('cx') == '70' && + $('svg circle')[18].getAttribute('cy') == '424.024' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-079.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-079.md new file mode 100644 index 00000000000..36c953d0596 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-079.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2c +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('r') == '6' && + $('svg circle')[18].getAttribute('fill') === 'white' && + $('svg circle')[18].getAttribute('stroke') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-080.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-080.md new file mode 100644 index 00000000000..08a57df3f2f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-080.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2d +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Apply the appropriate `cursor` style for these circles. + +# --hints-- + +test-text + +```js +assert($('svg circle')[18].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-081.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-081.md new file mode 100644 index 00000000000..14ffc2dbaf6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-081.md @@ -0,0 +1,309 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. + +# --hints-- + +test-text + +```js +assert( + /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-082.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-082.md new file mode 100644 index 00000000000..ef8009859e8 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-082.md @@ -0,0 +1,312 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2f +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. + +# --hints-- + +test-text + +```js +assert( + /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-083.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-083.md new file mode 100644 index 00000000000..43e8ea22992 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-083.md @@ -0,0 +1,315 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca30 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-084.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-084.md new file mode 100644 index 00000000000..1e01a5f30ff --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-084.md @@ -0,0 +1,318 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca31 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. + +# --hints-- + +test-text + +```js +assert( + $('svg')[1].getAttribute('width') == '200' && + $('svg')[1].getAttribute('height') == '200' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-085.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-085.md new file mode 100644 index 00000000000..33057ce9acc --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-085.md @@ -0,0 +1,319 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca32 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-086.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-086.md new file mode 100644 index 00000000000..fc228825cc5 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-086.md @@ -0,0 +1,324 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca33 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-087.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-087.md new file mode 100644 index 00000000000..bf1d3f754da --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-087.md @@ -0,0 +1,328 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca34 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-088.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-088.md new file mode 100644 index 00000000000..73bf1cd804a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-088.md @@ -0,0 +1,329 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca35 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. + +In this case, each platform of followers you have will map directly to a single color with nothing in between. + +# --hints-- + +test-text + +```js +assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-089.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-089.md new file mode 100644 index 00000000000..20900e45822 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-089.md @@ -0,0 +1,334 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca36 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. + +# --hints-- + +test-text + +```js +assert( + /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-090.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-090.md new file mode 100644 index 00000000000..a4a80c7f95d --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-090.md @@ -0,0 +1,336 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca37 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. + +# --hints-- + +test-text + +```js +assert( + /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-091.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-091.md new file mode 100644 index 00000000000..8a4e9aab0a3 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-091.md @@ -0,0 +1,335 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca38 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-092.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-092.md new file mode 100644 index 00000000000..84edb9a9490 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-092.md @@ -0,0 +1,344 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca39 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. + +In a few steps, you will make an array out of your data variable that will be passed to this function. + +# --hints-- + +test-text + +```js +assert( + /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-093.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-093.md new file mode 100644 index 00000000000..781851c9440 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-093.md @@ -0,0 +1,345 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3a +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-094.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-094.md new file mode 100644 index 00000000000..58dc3df6029 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-094.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3b +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-095.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-095.md new file mode 100644 index 00000000000..857d79ad14b --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-095.md @@ -0,0 +1,367 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3c +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: + +```js +d3.entries(data[8].followers)) +``` + +The array it builds looks like this: + +```js +[ + { key: 'twitter', value: 2845 }, + { key: 'tumblr', value: 2040 }, + { key: 'instagram', value: 4801 } +] +``` + +This is where the `value` comes from in your `pie` variable. + +Add the `d3.entries` function as your `pie` argument. Use it to create the above array. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-096.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-096.md new file mode 100644 index 00000000000..19400c8460f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-096.md @@ -0,0 +1,350 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. + +# --hints-- + +test-text + +```js +assert( + /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-097.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-097.md new file mode 100644 index 00000000000..b94dc14b7b7 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-097.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3e +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Use `append` to add three `g` elements for the pie. + +# --hints-- + +test-text + +```js +assert($('svg g').length === 20); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-098.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-098.md new file mode 100644 index 00000000000..8b1e882f741 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-098.md @@ -0,0 +1,351 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3f +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-099.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-099.md new file mode 100644 index 00000000000..7c2fdc874d7 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-099.md @@ -0,0 +1,352 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca40 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. + +# --hints-- + +test-text + +```js +assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-100.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-100.md new file mode 100644 index 00000000000..ff80e8cbead --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-100.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca41 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. + +Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g')[0].getAttribute('transform'); +assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-101.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-101.md new file mode 100644 index 00000000000..69a67b1c697 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-101.md @@ -0,0 +1,377 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca42 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('fill') === '#7cd9d1' && + pathsArr[1].getAttribute('fill') === '#f6dd71' && + pathsArr[2].getAttribute('fill') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-102.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-102.md new file mode 100644 index 00000000000..c35673b4338 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-102.md @@ -0,0 +1,364 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca43 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Next, set the `stroke` to `white` and the `stroke-width` to `2`. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('stroke') === 'white' && + pathsArr[0].getAttribute('stroke-width') == 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-103.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-103.md new file mode 100644 index 00000000000..b4d01a98916 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-103.md @@ -0,0 +1,365 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca44 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-104.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-104.md new file mode 100644 index 00000000000..f3f23bf2a8c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-104.md @@ -0,0 +1,381 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca47 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: + +```js +.text(d => { + +}) +``` + +The method for getting the percent of each slice will take a few steps: + +1. Find the total number of followers for the displayed year +2. Divide the followers of a single platform by that total +3. Turn it into a string to display + +# --hints-- + +test-text + +```js +assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-105.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-105.md new file mode 100644 index 00000000000..7dd7bc8f459 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-105.md @@ -0,0 +1,383 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca48 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: + +```js +d3.values(data[8].followers) +``` + +It will be an array with the values of the followers for the three platforms in 2020. + +Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. + +# --hints-- + +test-text + +```js +assert( + /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-106.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-106.md new file mode 100644 index 00000000000..1e304f5fbb6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-106.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca49 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. + +# --hints-- + +test-text + +```js +assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-107.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-107.md new file mode 100644 index 00000000000..9fcc056c466 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-107.md @@ -0,0 +1,376 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4a +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-108.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-108.md new file mode 100644 index 00000000000..124a7abec7e --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-108.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4b +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: + +```js +${Math.round(percent * 100)}% +``` + +Don't forget that you need a `return` statement here since you aren't using an implicit return. + +# --hints-- + +test-text + +```js +assert( + /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-109.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-109.md new file mode 100644 index 00000000000..de9a3090429 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-109.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4c +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` + +The `centroid` function will find the midpoint of each slice for each text element. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g text')[0] + .getAttribute('transform') + .replace('translate(', '') + .replace(')', '') + .split(','); +assert(transform[0] < 39 && transform[1] > 31); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-110.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-110.md new file mode 100644 index 00000000000..cfe05994783 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-110.md @@ -0,0 +1,389 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4d +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. + +After that, set the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +const text = $('.dashboard div svg g text')[0]; +assert( + text.style.textAnchor === 'middle' && + text.style.font.toLowerCase() === '10px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-111.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-111.md new file mode 100644 index 00000000000..5a6cda0ba57 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-111.md @@ -0,0 +1,391 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-112.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-112.md new file mode 100644 index 00000000000..be844c9e21c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-112.md @@ -0,0 +1,394 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the table a `width` of `200` and a `height` of `120` using `attr`. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert( + table.getAttribute('width') == 200 && table.getAttribute('height') == 120 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-113.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-113.md new file mode 100644 index 00000000000..439b742b887 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-113.md @@ -0,0 +1,396 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca50 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Set the `font` to `12px verdana` using the `style` function. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-114.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-114.md new file mode 100644 index 00000000000..1be90df8df5 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-114.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca51 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-115.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-115.md new file mode 100644 index 00000000000..df269c6462c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-115.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca52 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-116.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-116.md new file mode 100644 index 00000000000..eb6c7d09187 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-116.md @@ -0,0 +1,404 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca53 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +Use the `text` function to set the text of the selection to `2020 followers`. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').text() === '2020 followers'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-117.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-117.md new file mode 100644 index 00000000000..7c19f3dcae6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-117.md @@ -0,0 +1,406 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca54 +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-118.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-118.md new file mode 100644 index 00000000000..0cfe9b5a70a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-118.md @@ -0,0 +1,412 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca55 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-119.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-119.md new file mode 100644 index 00000000000..bcdec5c5339 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-119.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca56 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +Add a `selectAll` function to the selection and pass it the string `tr`. + +# --hints-- + +test-text + +```js +assert( + /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-120.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-120.md new file mode 100644 index 00000000000..4ee832321fb --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-120.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca57 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. + +# --hints-- + +test-text + +```js +assert( + /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-121.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-121.md new file mode 100644 index 00000000000..e03bdbdb791 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-121.md @@ -0,0 +1,418 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca58 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-122.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-122.md new file mode 100644 index 00000000000..ed855f5024f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-122.md @@ -0,0 +1,422 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca59 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-123.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-123.md new file mode 100644 index 00000000000..7c8fd63c36c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-123.md @@ -0,0 +1,426 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5a +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-124.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-124.md new file mode 100644 index 00000000000..721d4428093 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-124.md @@ -0,0 +1,431 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5b +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[0] + .getAttribute('align') + .toLowerCase() === 'right' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-125.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-125.md new file mode 100644 index 00000000000..565a8dc72fe --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-125.md @@ -0,0 +1,430 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5c +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-126.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-126.md new file mode 100644 index 00000000000..cb21e05cc6a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-126.md @@ -0,0 +1,437 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5d +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +Set the `align` attribute to `center`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[1] + .getAttribute('align') + .toLowerCase() === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-127.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-127.md new file mode 100644 index 00000000000..90544de2a70 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-127.md @@ -0,0 +1,435 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5e +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Append a `div` element to the selection. Each `div` will be a small square for each color. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td div').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-128.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-128.md new file mode 100644 index 00000000000..bd8711a89b8 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-128.md @@ -0,0 +1,438 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5f +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +Set the `width` to `16px` and the `height` to `16px` using the `style` function. + +# --hints-- + +test-text + +```js +const div = $('.dashboard div table tbody tr td div')[0]; +assert(div.style.width == '16px' && div.style.height === '16px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-129.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-129.md new file mode 100644 index 00000000000..3c351a7399a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-129.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca60 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td div')[0].style.backgroundColor === + 'rgb(124, 217, 209)' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-130.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-130.md new file mode 100644 index 00000000000..bace7d9779c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-130.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca61 +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-131.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-131.md new file mode 100644 index 00000000000..e508369e164 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-131.md @@ -0,0 +1,446 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca62 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Set the `text` to a "d function" that returns the value(`d.value`) for each data point. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-132.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-132.md new file mode 100644 index 00000000000..d3f68fb936c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-132.md @@ -0,0 +1,450 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca63 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Set the `align` attribute to `left` for this selection. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[2] + .getAttribute('align') + .toLowerCase() === 'left' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-133.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-133.md new file mode 100644 index 00000000000..6fe0e8de953 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-133.md @@ -0,0 +1,448 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca64 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const th = $('.dashboard div table thead tr th')[0]; +assert(th.style.position === 'relative' && th.style.left === '20px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-134.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-134.md new file mode 100644 index 00000000000..03e36d189a6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-134.md @@ -0,0 +1,453 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca65 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert(table.style.position === 'relative' && table.style.top === '30px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-135.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-135.md new file mode 100644 index 00000000000..a6c4b6fb870 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-135.md @@ -0,0 +1,464 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca66 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const pieGraph = $('.dashboard div svg')[0]; +assert( + pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-136.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-136.md new file mode 100644 index 00000000000..139d0e87f65 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-136.md @@ -0,0 +1,476 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca67 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. + +Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. + +# --hints-- + +test-text + +```js +assert( + typeof drawDashboard === 'function' && + /<\/script>\s* + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-137.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-137.md new file mode 100644 index 00000000000..a690b7567e6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-137.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca68 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. + +Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: + +```js +array.findIndex(d => + // find the index where the year passed to + // drawDashboard equals the year of the array +) +``` + +After this, you will be able to use `data[index]` to get that item in the array. + +# --hints-- + +test-text + +```js +assert.match(code,/const index = data.findIndex\(\(?d\)? => (year === d\.year|d.year === year)\s*\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-138.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-138.md new file mode 100644 index 00000000000..054da5d15a2 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-138.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6a +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. + +The five spots are: + +1. The `domain` for `pieColors`. +2. The `data` for `pieGraphData`. +3. The `text` for your pie slice text. +4. The `data` for your `legendRows`. + +# --hints-- + +test-text + +```js +assert( + !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-139.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-139.md new file mode 100644 index 00000000000..5630a5404bb --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-139.md @@ -0,0 +1,482 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: + +```js +.on('mouseover', d => drawDashboard(d)) +``` + +So now, when you hover a label, the function will be called with the year that is being hovered. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\)\)/g + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-140.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-140.md new file mode 100644 index 00000000000..45fd59a633e --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-140.md @@ -0,0 +1,477 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6c +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. + +Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. + +# --hints-- + +test-text + +```js +assert.match(code, /d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-141.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-141.md new file mode 100644 index 00000000000..0c9593756d7 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-141.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6d +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Now when you hover a label, you can see the data for the different years. + +Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. + +To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. + +Here's a hint: + +```js +.style('font', d => d === year ? ) +``` + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg g text')).filter( + (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-142.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-142.md new file mode 100644 index 00000000000..bee3e7b5989 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-142.md @@ -0,0 +1,478 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6e +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. + +# --hints-- + +test-text + +```js +assert.match(code, + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/ +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-143.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-143.md new file mode 100644 index 00000000000..0cfeac007dc --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-143.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6f +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg circle')).filter( + (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-144.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-144.md new file mode 100644 index 00000000000..97348bc5be8 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-144.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca70 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. + +After that, you will be able hover any of the circles or year labels to get the information for that year. + +# --hints-- + +test-text + +```js +assert.equal( + code.match( + /\.on\('mouseover', d => drawDashboard\(d\.year\)\)/g + )?.length, 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-145.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-145.md new file mode 100644 index 00000000000..3bf1fb49e15 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-145.md @@ -0,0 +1,494 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca71 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. + +Then, all of the circles will get filled in for the currently displayed year. + +# --hints-- + +test-text + +```js +const circles = Object.values($('.dashboard svg circle')); +assert( + circles.filter( + (el) => + el.getAttribute && + (el.getAttribute('fill') === '#7cd9d1' || + el.getAttribute('fill') === '#f6dd71' || + el.getAttribute('fill') === '#fd9b98') + ).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-146.md b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-146.md new file mode 100644 index 00000000000..d9c3208306e --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/d3-dashboard/step-146.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca72 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. + +That's it, your dashboard is finished! Don't forget to admire your hard work. + +# --hints-- + +test-text + +```js +assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md new file mode 100644 index 00000000000..ea44782e9cd --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md @@ -0,0 +1,105 @@ +--- +id: 587d7fa6367417b2b2512bc2 +title: Add Document Elements with D3 +challengeType: 6 +forumTopicId: 301474 +dashedName: add-document-elements-with-d3 +--- + +# --description-- + +D3 has several methods that let you add and change elements in your document. + +The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example: + +```js +const anchor = d3.select("a"); +``` + +The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods. + +Two other useful methods are `append()` and `text()`. + +The `append()` method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node. + +The `text()` method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method. + +Here's an example that selects an unordered list, appends a list item, and adds text: + +```js +d3.select("ul") + .append("li") + .text("Very important item"); +``` + +D3 allows you to chain several methods together with periods to perform a number of actions in a row. + +# --instructions-- + +Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text `Learning D3` into the `h1` element. + +# --hints-- + +The `body` should have one `h1` element. + +```js +assert($('body').children('h1').length == 1); +``` + +The `h1` element should have the text `Learning D3` in it. + +```js +assert($('h1').text() == 'Learning D3'); +``` + +Your code should access the `d3` object. + +```js +assert(code.match(/d3/g)); +``` + +Your code should use the `select` method. + +```js +assert(code.match(/\.select/g)); +``` + +Your code should use the `append` method. + +```js +assert(code.match(/\.append/g)); +``` + +Your code should use the `text` method. + +```js +assert(code.match(/\.text/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md new file mode 100644 index 00000000000..0ad9ff3fbac --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md @@ -0,0 +1,224 @@ +--- +id: 587d7fab367417b2b2512bd9 +title: Add Labels to Scatter Plot Circles +challengeType: 6 +forumTopicId: 301477 +dashedName: add-labels-to-scatter-plot-circles +--- + +# --description-- + +You can add text to create labels for the points in a scatter plot. + +The goal is to display the comma-separated values for the first (`x`) and second (`y`) fields of each item in `dataset`. + +The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. In this challenge, the `y` value (which determines height) can use the same value that the `circle` uses for its `cy` attribute. The `x` value can be slightly larger than the `cx` value of the `circle`, so the label is visible. This will push the label to the right of the plotted point. + +# --instructions-- + +Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is `34, 78`. Set the `x` attribute so it's `5` units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`. + +# --hints-- + +Your code should have 10 `text` elements. + +```js +assert($('text').length == 10); +``` + +The first label should have text of `34, 78`, an `x` value of `39`, and a `y` value of `422`. + +```js +assert( + $('text').eq(0).text() == '34, 78' && + $('text').eq(0).attr('x') == '39' && + $('text').eq(0).attr('y') == '422' +); +``` + +The second label should have text of `109, 280`, an `x` value of `114`, and a `y` value of `220`. + +```js +assert( + $('text').eq(1).text() == '109, 280' && + $('text').eq(1).attr('x') == '114' && + $('text').eq(1).attr('y') == '220' +); +``` + +The third label should have text of `310, 120`, an `x` value of `315`, and a `y` value of `380`. + +```js +assert( + $('text').eq(2).text() == '310, 120' && + $('text').eq(2).attr('x') == '315' && + $('text').eq(2).attr('y') == '380' +); +``` + +The fourth label should have text of `79, 411`, an `x` value of `84`, and a `y` value of `89`. + +```js +assert( + $('text').eq(3).text() == '79, 411' && + $('text').eq(3).attr('x') == '84' && + $('text').eq(3).attr('y') == '89' +); +``` + +The fifth label should have text of `420, 220`, an `x` value of `425`, and a `y` value of `280`. + +```js +assert( + $('text').eq(4).text() == '420, 220' && + $('text').eq(4).attr('x') == '425' && + $('text').eq(4).attr('y') == '280' +); +``` + +The sixth label should have text of `233, 145`, an `x` value of `238`, and a `y` value of `355`. + +```js +assert( + $('text').eq(5).text() == '233, 145' && + $('text').eq(5).attr('x') == '238' && + $('text').eq(5).attr('y') == '355' +); +``` + +The seventh label should have text of `333, 96`, an `x` value of `338`, and a `y` value of `404`. + +```js +assert( + $('text').eq(6).text() == '333, 96' && + $('text').eq(6).attr('x') == '338' && + $('text').eq(6).attr('y') == '404' +); +``` + +The eighth label should have text of `222, 333`, an `x` value of `227`, and a `y` value of `167`. + +```js +assert( + $('text').eq(7).text() == '222, 333' && + $('text').eq(7).attr('x') == '227' && + $('text').eq(7).attr('y') == '167' +); +``` + +The ninth label should have text of `78, 320`, an `x` value of `83`, and a `y` value of `180`. + +```js +assert( + $('text').eq(8).text() == '78, 320' && + $('text').eq(8).attr('x') == '83' && + $('text').eq(8).attr('y') == '180' +); +``` + +The tenth label should have text of `21, 123`, an `x` value of `26`, and a `y` value of `377`. + +```js +assert( + $('text').eq(9).text() == '21, 123' && + $('text').eq(9).attr('x') == '26' && + $('text').eq(9).attr('y') == '377' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md new file mode 100644 index 00000000000..1ed6ae7d5e2 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md @@ -0,0 +1,123 @@ +--- +id: 587d7fa7367417b2b2512bc7 +title: Change Styles Based on Data +challengeType: 6 +forumTopicId: 301479 +dashedName: change-styles-based-on-data +--- + +# --description-- + +D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the `style()` method to change the styling for different elements. + +For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point: + +```js +selection.style("color", (d) => { + +}); +``` + +The `style()` method is not limited to setting the `color` - it can be used with other CSS properties as well. + +# --instructions-- + +Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green. + +**Note:** You can use if-else logic, or the ternary operator. + +# --hints-- + +The first `h2` should have a `color` of red. + +```js +assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)'); +``` + +The second `h2` should have a `color` of green. + +```js +assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)'); +``` + +The third `h2` should have a `color` of green. + +```js +assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)'); +``` + +The fourth `h2` should have a `color` of red. + +```js +assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)'); +``` + +The fifth `h2` should have a `color` of green. + +```js +assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)'); +``` + +The sixth `h2` should have a `color` of red. + +```js +assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)'); +``` + +The seventh `h2` should have a `color` of green. + +```js +assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)'); +``` + +The eighth `h2` should have a `color` of red. + +```js +assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)'); +``` + +The ninth `h2` should have a `color` of red. + +```js +assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md new file mode 100644 index 00000000000..d118740df6c --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md @@ -0,0 +1,88 @@ +--- +id: 587d7fab367417b2b2512bda +title: Create a Linear Scale with D3 +challengeType: 6 +forumTopicId: 301483 +dashedName: create-a-linear-scale-with-d3 +--- + +# --description-- + +The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area. + +In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas. + +For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area. + +It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height. + +D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`: + +```js +const scale = d3.scaleLinear() +``` + +By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this. + +# --instructions-- + +Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of `50`. + +# --hints-- + +The text in the `h2` should be `50`. + +```js +assert($('h2').text() == '50'); +``` + +Your code should use the `scaleLinear()` method. + +```js +assert(code.match(/\.scaleLinear/g)); +``` + +The `output` variable should call `scale` with an argument of `50`. + +```js +assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md new file mode 100644 index 00000000000..5f4bd1e056f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md @@ -0,0 +1,103 @@ +--- +id: 587d7fab367417b2b2512bd7 +title: Create a Scatterplot with SVG Circles +challengeType: 6 +forumTopicId: 301484 +dashedName: create-a-scatterplot-with-svg-circles +--- + +# --description-- + +A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the `x` and `y` axes, and are used to position the circle in the visualization. + +SVG has a `circle` tag to create the circle shape. It works a lot like the `rect` elements you used for the bar chart. + +# --instructions-- + +Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas. + +**Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge. + +# --hints-- + +Your code should have 10 `circle` elements. + +```js +assert($('circle').length == 10); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md new file mode 100644 index 00000000000..71a39ddaf10 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md @@ -0,0 +1,103 @@ +--- +id: 587d7fa8367417b2b2512bcc +title: Display Shapes with SVG +challengeType: 6 +forumTopicId: 301485 +dashedName: display-shapes-with-svg +--- + +# --description-- + +The last challenge created an `svg` element with a given width and height, which was visible because it had a `background-color` applied to it in the `style` tag. The code made space for the given width and height. + +The next step is to create a shape to put in the `svg` area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (``) SVG shape could create a bar in a bar chart. + +When you place a shape into the `svg` area, you can specify where it goes with `x` and `y` coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for `x` push the shape to the right, and positive values for `y` push the shape down from the origin point. + +To place a shape in the middle of the 500 (width) x 100 (height) `svg` from last challenge, the `x` coordinate would be 250 and the `y` coordinate would be 50. + +An SVG `rect` has four attributes. There are the `x` and `y` coordinates for where it is placed in the `svg` area. It also has a `height` and `width` to specify the size. + +# --instructions-- + +Add a `rect` shape to the `svg` using `append()`, and give it a `width` attribute of `25` and `height` attribute of `100`. Also, give the `rect` `x` and `y` attributes each set to `0`. + +# --hints-- + +Your document should have 1 `rect` element. + +```js +assert($('rect').length == 1); +``` + +The `rect` element should have a `width` attribute set to `25`. + +```js +assert($('rect').attr('width') == '25'); +``` + +The `rect` element should have a `height` attribute set to `100`. + +```js +assert($('rect').attr('height') == '100'); +``` + +The `rect` element should have an `x` attribute set to `0`. + +```js +assert($('rect').attr('x') == '0'); +``` + +The `rect` element should have a `y` attribute set to `0`. + +```js +assert($('rect').attr('y') == '0'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md new file mode 100644 index 00000000000..33463161a26 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md @@ -0,0 +1,145 @@ +--- +id: 587d7fa9367417b2b2512bcf +title: Dynamically Change the Height of Each Bar +challengeType: 6 +forumTopicId: 301486 +dashedName: dynamically-change-the-height-of-each-bar +--- + +# --description-- + +The height of each bar can be set to the value of the data point in the array, similar to how the `x` value was set dynamically. + +```js +selection.attr("property", (d, i) => { + +}) +``` + +Here `d` would be the data point value, and `i` would be the index of the data point in the array. + +# --instructions-- + +Change the callback function for the `height` attribute to return the data value times 3. + +**Note:** Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example. + +# --hints-- + +The first `rect` should have a `height` of `36`. + +```js +assert($('rect').eq(0).attr('height') == '36'); +``` + +The second `rect` should have a `height` of `93`. + +```js +assert($('rect').eq(1).attr('height') == '93'); +``` + +The third `rect` should have a `height` of `66`. + +```js +assert($('rect').eq(2).attr('height') == '66'); +``` + +The fourth `rect` should have a `height` of `51`. + +```js +assert($('rect').eq(3).attr('height') == '51'); +``` + +The fifth `rect` should have a `height` of `75`. + +```js +assert($('rect').eq(4).attr('height') == '75'); +``` + +The sixth `rect` should have a `height` of `54`. + +```js +assert($('rect').eq(5).attr('height') == '54'); +``` + +The seventh `rect` should have a `height` of `87`. + +```js +assert($('rect').eq(6).attr('height') == '87'); +``` + +The eighth `rect` should have a `height` of `42`. + +```js +assert($('rect').eq(7).attr('height') == '42'); +``` + +The ninth `rect` should have a `height` of `27`. + +```js +assert($('rect').eq(8).attr('height') == '27'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md new file mode 100644 index 00000000000..ad10065163f --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md @@ -0,0 +1,151 @@ +--- +id: 587d7fa9367417b2b2512bce +title: Dynamically Set the Coordinates for Each Bar +challengeType: 6 +forumTopicId: 301487 +dashedName: dynamically-set-the-coordinates-for-each-bar +--- + +# --description-- + +The last challenge created and appended a rectangle to the `svg` element for each point in `dataset` to represent a bar. Unfortunately, they were all stacked on top of each other. + +The placement of a rectangle is handled by the `x` and `y` attributes. They tell D3 where to start drawing the shape in the `svg` area. The last challenge set them each to 0, so every bar was placed in the upper-left corner. + +For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the `x` value should increase. + +The `attr()` method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually `d`) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format: + +```js +selection.attr("property", (d, i) => { + +}) +``` + +It's important to note that you do NOT need to write a `for` loop or use `forEach()` to iterate over the items in the data set. Recall that the `data()` method parses the data set, and any method that's chained after `data()` is run once for each item in the data set. + +# --instructions-- + +Change the `x` attribute callback function so it returns the index times 30. + +**Note:** Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example. + +# --hints-- + +The first `rect` should have an `x` value of `0`. + +```js +assert($('rect').eq(0).attr('x') == '0'); +``` + +The second `rect` should have an `x` value of `30`. + +```js +assert($('rect').eq(1).attr('x') == '30'); +``` + +The third `rect` should have an `x` value of `60`. + +```js +assert($('rect').eq(2).attr('x') == '60'); +``` + +The fourth `rect` should have an `x` value of `90`. + +```js +assert($('rect').eq(3).attr('x') == '90'); +``` + +The fifth `rect` should have an `x` value of `120`. + +```js +assert($('rect').eq(4).attr('x') == '120'); +``` + +The sixth `rect` should have an `x` value of `150`. + +```js +assert($('rect').eq(5).attr('x') == '150'); +``` + +The seventh `rect` should have an `x` value of `180`. + +```js +assert($('rect').eq(6).attr('x') == '180'); +``` + +The eighth `rect` should have an `x` value of `210`. + +```js +assert($('rect').eq(7).attr('x') == '210'); +``` + +The ninth `rect` should have an `x` value of `240`. + +```js +assert($('rect').eq(8).attr('x') == '240'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md new file mode 100644 index 00000000000..66156ef8878 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md @@ -0,0 +1,143 @@ +--- +id: 587d7fa9367417b2b2512bd0 +title: Invert SVG Elements +challengeType: 6 +forumTopicId: 301488 +dashedName: invert-svg-elements +--- + +# --description-- + +You may have noticed the bar chart looked like it's upside-down, or inverted. This is because of how SVG uses (x, y) coordinates. + +In SVG, the origin point for the coordinates is in the upper-left corner. An `x` coordinate of 0 places a shape on the left edge of the SVG area. A `y` coordinate of 0 places a shape on the top edge of the SVG area. Higher `x` values push the rectangle to the right. Higher `y` values push the rectangle down. + +To make the bars right-side-up, you need to change the way the `y` coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area. + +The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the `y` coordinate needs a value of 100. If the data point value were 1, you would start with a `y` coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final `y` coordinate would be 99. + +The `y` coordinate that is `y = heightOfSVG - heightOfBar` would place the bars right-side-up. + +# --instructions-- + +Change the callback function for the `y` attribute to set the bars right-side-up. Remember that the `height` of the bar is 3 times the data value `d`. + +**Note:** In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points. + +# --hints-- + +The first `rect` should have a `y` value of `64`. + +```js +assert($('rect').eq(0).attr('y') == h - dataset[0] * 3); +``` + +The second `rect` should have a `y` value of `7`. + +```js +assert($('rect').eq(1).attr('y') == h - dataset[1] * 3); +``` + +The third `rect` should have a `y` value of `34`. + +```js +assert($('rect').eq(2).attr('y') == h - dataset[2] * 3); +``` + +The fourth `rect` should have a `y` value of `49`. + +```js +assert($('rect').eq(3).attr('y') == h - dataset[3] * 3); +``` + +The fifth `rect` should have a `y` value of `25`. + +```js +assert($('rect').eq(4).attr('y') == h - dataset[4] * 3); +``` + +The sixth `rect` should have a `y` value of `46`. + +```js +assert($('rect').eq(5).attr('y') == h - dataset[5] * 3); +``` + +The seventh `rect` should have a `y` value of `13`. + +```js +assert($('rect').eq(6).attr('y') == h - dataset[6] * 3); +``` + +The eighth `rect` should have a `y` value of `58`. + +```js +assert($('rect').eq(7).attr('y') == h - dataset[7] * 3); +``` + +The ninth `rect` should have a `y` value of `73`. + +```js +assert($('rect').eq(8).attr('y') == h - dataset[8] * 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md new file mode 100644 index 00000000000..f5fba672e99 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md @@ -0,0 +1,93 @@ +--- +id: 587d7fa8367417b2b2512bcb +title: Learn About SVG in D3 +challengeType: 6 +forumTopicId: 301489 +dashedName: learn-about-svg-in-d3 +--- + +# --description-- + +SVG stands for Scalable Vector Graphics. + +Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor. + +SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML `svg` tag. + +CSS can be scalable when styles use relative units (such as `vh`, `vw`, or percentages), but using SVG is more flexible to build data visualizations. + +# --instructions-- + +Add an `svg` node to the `body` using `append()`. Give it a `width` attribute set to the provided `w` constant and a `height` attribute set to the provided `h` constant using the `attr()` or `style()` methods for each. You'll see it in the output because there's a `background-color` of pink applied to it in the `style` tag. + +**Note:** When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is. + +# --hints-- + +Your document should have 1 `svg` element. + +```js +assert($('svg').length == 1); +``` + +The `svg` element should have a `width` attribute set to `500` or styled to have a width of `500px`. + +```js +assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px'); +``` + +The `svg` element should have a `height` attribute set to `100` or styled to have a height of `100px`. + +```js +assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +``` + +# --solutions-- + +```html + + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md new file mode 100644 index 00000000000..bf0acc7b43a --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md @@ -0,0 +1,82 @@ +--- +id: 587d7fa6367417b2b2512bc3 +title: Select a Group of Elements with D3 +challengeType: 6 +forumTopicId: 301490 +dashedName: select-a-group-of-elements-with-d3 +--- + +# --description-- + +D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document: + +```js +const anchors = d3.selectAll("a"); +``` + +Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods. + +# --instructions-- + +Select all of the `li` tags in the document, and change their text to the string `list item` by chaining the `.text()` method. + +# --hints-- + +There should be 3 `li` elements on the page, and the text in each one should say `list item`. Capitalization and spacing should match exactly. + +```js +assert( + $('li') + .text() + .match(/list item/g).length == 3 +); +``` + +Your code should access the `d3` object. + +```js +assert(code.match(/d3/g)); +``` + +Your code should use the `selectAll` method. + +```js +assert(code.match(/\.selectAll/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
    +
  • Example
    • +
  • Example
    • +
  • Example
    • +
+ + +``` + +# --solutions-- + +```html + +
    +
  • Example
    • +
  • Example
    • +
  • Example
    • +
+ + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md new file mode 100644 index 00000000000..5a678c5dd0d --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md @@ -0,0 +1,106 @@ +--- +id: 587d7fac367417b2b2512bdb +title: Set a Domain and a Range on a Scale +challengeType: 6 +forumTopicId: 301491 +dashedName: set-a-domain-and-a-range-on-a-scale +--- + +# --description-- + +By default, scales use the identity relationship. This means the input value maps to the output value. However, scales can be much more flexible and interesting. + +Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the domain. + +You want to map those points along the `x` axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the range. + +The `domain()` and `range()` methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example: + +```js +scale.domain([50, 480]); +scale.range([10, 500]); +scale(50) +scale(480) +scale(325) +scale(750) +d3.scaleLinear() +``` + +In order, the following values would be displayed in the console: `10`, `500`, `323.37`, and `807.67`. + +Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range. + +# --instructions-- + +Create a scale and set its domain to `[250, 500]` and range to `[10, 150]`. + +**Note:** You can chain the `domain()` and `range()` methods onto the `scale` variable. + +# --hints-- + +Your code should use the `domain()` method. + +```js +assert(code.match(/\.domain/g)); +``` + +The `domain()` of the `scale` should be set to `[250, 500]`. + +```js +assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500])); +``` + +Your code should use the `range()` method. + +```js +assert(code.match(/\.range/g)); +``` + +The `range()` of the `scale` should be set to `[10, 150]`. + +```js +assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150])); +``` + +The text in the `h2` should be `-102`. + +```js +assert($('h2').text() == '-102'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/style-d3-labels.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/style-d3-labels.md new file mode 100644 index 00000000000..934932f51ff --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/style-d3-labels.md @@ -0,0 +1,110 @@ +--- +id: 587d7faa367417b2b2512bd3 +title: Style D3 Labels +challengeType: 6 +forumTopicId: 301492 +dashedName: style-d3-labels +--- + +# --description-- + +D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as `font-family` or `font-size`. + +# --instructions-- + +Set the `font-size` of the `text` elements to `25px`, and the color of the text to red. + +# --hints-- + +The labels should all have a `fill` color of red. + +```js +assert($('text').css('fill') == 'rgb(255, 0, 0)'); +``` + +The labels should all have a `font-size` of `25` pixels. + +```js +assert($('text').css('font-size') == '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md new file mode 100644 index 00000000000..27dd13a1b97 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md @@ -0,0 +1,137 @@ +--- +id: 587d7fa8367417b2b2512bc9 +title: Update the Height of an Element Dynamically +challengeType: 6 +forumTopicId: 301493 +dashedName: update-the-height-of-an-element-dynamically +--- + +# --description-- + +The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this: + +1) Create a `div` for each data point in the array + +2) Give each `div` a dynamic height, using a callback function in the `style()` method that sets height equal to the data value + +Recall the format to set a style using a callback function: + +```js +selection.style("cssProperty", (d) => d) +``` + +# --instructions-- + +Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string `px` added to it. + +# --hints-- + +The first `div` should have a `height` of `12` pixels. + +```js +assert($('div').eq(0)[0].style.height === '12px'); +``` + +The second `div` should have a `height` of `31` pixels. + +```js +assert($('div').eq(1)[0].style.height === '31px'); +``` + +The third `div` should have a `height` of `22` pixels. + +```js +assert($('div').eq(2)[0].style.height === '22px'); +``` + +The fourth `div` should have a `height` of `17` pixels. + +```js +assert($('div').eq(3)[0].style.height === '17px'); +``` + +The fifth `div` should have a `height` of `25` pixels. + +```js +assert($('div').eq(4)[0].style.height === '25px'); +``` + +The sixth `div` should have a `height` of `18` pixels. + +```js +assert($('div').eq(5)[0].style.height === '18px'); +``` + +The seventh `div` should have a `height` of `29` pixels. + +```js +assert($('div').eq(6)[0].style.height === '29px'); +``` + +The eighth `div` should have a `height` of `14` pixels. + +```js +assert($('div').eq(7)[0].style.height === '14px'); +``` + +The ninth `div` should have a `height` of `9` pixels. + +```js +assert($('div').eq(8)[0].style.height === '9px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +``` + +# --solutions-- + +```html + + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md new file mode 100644 index 00000000000..e02248743c2 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md @@ -0,0 +1,347 @@ +--- +id: 587d7fac367417b2b2512bde +title: Use a Pre-Defined Scale to Place Elements +challengeType: 6 +forumTopicId: 301494 +dashedName: use-a-pre-defined-scale-to-place-elements +--- + +# --description-- + +With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area. + +You set the coordinate attribute values for an SVG shape with the scaling function. This includes `x` and `y` attributes for `rect` or `text` elements, or `cx` and `cy` for `circles`. Here's an example: + +```js +shape + .attr("x", (d) => xScale(d[0])) +``` + +Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the `text()` method for a tooltip or label. + +# --instructions-- + +Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of `5` units, too. + +For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add `10` units to the `x` data value before passing it to the `xScale`. + +# --hints-- + +Your code should have 10 `circle` elements. + +```js +assert($('circle').length == 10); +``` + +The first `circle` element should have a `cx` value of approximately `91` and a `cy` value of approximately `368` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(0).attr('cx')) == '91' && + Math.round($('circle').eq(0).attr('cy')) == '368' && + $('circle').eq(0).attr('r') == '5' +); +``` + +The second `circle` element should have a `cx` value of approximately `159` and a `cy` value of approximately `181` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(1).attr('cx')) == '159' && + Math.round($('circle').eq(1).attr('cy')) == '181' && + $('circle').eq(1).attr('r') == '5' +); +``` + +The third `circle` element should have a `cx` value of approximately `340` and a `cy` value of approximately `329` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(2).attr('cx')) == '340' && + Math.round($('circle').eq(2).attr('cy')) == '329' && + $('circle').eq(2).attr('r') == '5' +); +``` + +The fourth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `60` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(3).attr('cx')) == '131' && + Math.round($('circle').eq(3).attr('cy')) == '60' && + $('circle').eq(3).attr('r') == '5' +); +``` + +The fifth `circle` element should have a `cx` value of approximately `440` and a `cy` value of approximately `237` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(4).attr('cx')) == '440' && + Math.round($('circle').eq(4).attr('cy')) == '237' && + $('circle').eq(4).attr('r') == '5' +); +``` + +The sixth `circle` element should have a `cx` value of approximately `271` and a `cy` value of approximately `306` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(5).attr('cx')) == '271' && + Math.round($('circle').eq(5).attr('cy')) == '306' && + $('circle').eq(5).attr('r') == '5' +); +``` + +The seventh `circle` element should have a `cx` value of approximately `361` and a `cy` value of approximately `351` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(6).attr('cx')) == '361' && + Math.round($('circle').eq(6).attr('cy')) == '351' && + $('circle').eq(6).attr('r') == '5' +); +``` + +The eighth `circle` element should have a `cx` value of approximately `261` and a `cy` value of approximately `132` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(7).attr('cx')) == '261' && + Math.round($('circle').eq(7).attr('cy')) == '132' && + $('circle').eq(7).attr('r') == '5' +); +``` + +The ninth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `144` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(8).attr('cx')) == '131' && + Math.round($('circle').eq(8).attr('cy')) == '144' && + $('circle').eq(8).attr('r') == '5' +); +``` + +The tenth `circle` element should have a `cx` value of approximately `79` and a `cy` value of approximately `326` after applying the scales. It should also have an `r` value of `5`. + +```js +assert( + Math.round($('circle').eq(9).attr('cx')) == '79' && + Math.round($('circle').eq(9).attr('cy')) == '326' && + $('circle').eq(9).attr('r') == '5' +); +``` + +Your code should have 10 `text` elements. + +```js +assert($('text').length == 10); +``` + +The first label should have an `x` value of approximately `100` and a `y` value of approximately `368` after applying the scales. + +```js +assert( + Math.round($('text').eq(0).attr('x')) == '100' && + Math.round($('text').eq(0).attr('y')) == '368' +); +``` + +The second label should have an `x` value of approximately `168` and a `y` value of approximately `181` after applying the scales. + +```js +assert( + Math.round($('text').eq(1).attr('x')) == '168' && + Math.round($('text').eq(1).attr('y')) == '181' +); +``` + +The third label should have an `x` value of approximately `350` and a `y` value of approximately `329` after applying the scales. + +```js +assert( + Math.round($('text').eq(2).attr('x')) == '350' && + Math.round($('text').eq(2).attr('y')) == '329' +); +``` + +The fourth label should have an `x` value of approximately `141` and a `y` value of approximately `60` after applying the scales. + +```js +assert( + Math.round($('text').eq(3).attr('x')) == '141' && + Math.round($('text').eq(3).attr('y')) == '60' +); +``` + +The fifth label should have an `x` value of approximately `449` and a `y` value of approximately `237` after applying the scales. + +```js +assert( + Math.round($('text').eq(4).attr('x')) == '449' && + Math.round($('text').eq(4).attr('y')) == '237' +); +``` + +The sixth label should have an `x` value of approximately `280` and a `y` value of approximately `306` after applying the scales. + +```js +assert( + Math.round($('text').eq(5).attr('x')) == '280' && + Math.round($('text').eq(5).attr('y')) == '306' +); +``` + +The seventh label should have an `x` value of approximately `370` and a `y` value of approximately `351` after applying the scales. + +```js +assert( + Math.round($('text').eq(6).attr('x')) == '370' && + Math.round($('text').eq(6).attr('y')) == '351' +); +``` + +The eighth label should have an `x` value of approximately `270` and a `y` value of approximately `132` after applying the scales. + +```js +assert( + Math.round($('text').eq(7).attr('x')) == '270' && + Math.round($('text').eq(7).attr('y')) == '132' +); +``` + +The ninth label should have an `x` value of approximately `140` and a `y` value of approximately `144` after applying the scales. + +```js +assert( + Math.round($('text').eq(8).attr('x')) == '140' && + Math.round($('text').eq(8).attr('y')) == '144' +); +``` + +The tenth label should have an `x` value of approximately `88` and a `y` value of approximately `326` after applying the scales. + +```js +assert( + Math.round($('text').eq(9).attr('x')) == '88' && + Math.round($('text').eq(9).attr('y')) == '326' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md new file mode 100644 index 00000000000..92889986bd6 --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md @@ -0,0 +1,156 @@ +--- +id: 587d7fac367417b2b2512bdd +title: Use Dynamic Scales +challengeType: 6 +forumTopicId: 301495 +dashedName: use-dynamic-scales +--- + +# --description-- + +The D3 `min()` and `max()` methods are useful to help set the scale. + +Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page. + +The example below sets the x-axis scale for scatter plot data. The `domain()` method passes information to the scale about the raw data values for the plot. The `range()` method gives it information about the actual space on the web page for the visualization. + +In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas. + +```js +const dataset = [ + [ 34, 78 ], + [ 109, 280 ], + [ 310, 120 ], + [ 79, 411 ], + [ 420, 220 ], + [ 233, 145 ], + [ 333, 96 ], + [ 222, 333 ], + [ 78, 320 ], + [ 21, 123 ] +]; +const w = 500; +const h = 500; + +const padding = 30; +const xScale = d3.scaleLinear() + .domain([0, d3.max(dataset, (d) => d[0])]) + .range([padding, w - padding]); +``` + +The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500). + +# --instructions-- + +Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum `y` value in the set. The range should use the SVG height (`h`) and include padding. + +**Note:** Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument. + +# --hints-- + +The text in the `h2` should be `30`. + +```js +assert(output == 30 && $('h2').text() == '30'); +``` + +The `domain()` of yScale should be equivalent to `[0, 411]`. + +```js +assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411])); +``` + +The `range()` of yScale should be equivalent to `[470, 30]`. + +```js +assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30])); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + + +``` diff --git a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md new file mode 100644 index 00000000000..4550322262e --- /dev/null +++ b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md @@ -0,0 +1,140 @@ +--- +id: 587d7fad367417b2b2512be2 +title: Change Text with click Events +challengeType: 6 +forumTopicId: 301500 +dashedName: change-text-with-click-events +--- + +# --description-- + +When the click event happens, you can use JavaScript to update an HTML element. + +For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`. + +This works by adding the following code within the click event: + +```js +document.getElementsByClassName('message')[0].textContent="Here is the message"; +``` + +# --instructions-- + +Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`. + +# --hints-- + +Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string. + +```js +assert( + code.match( + /document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

+``` + +# --solutions-- + +```html + + + + +

Cat Photo Finder

+

+ The message will go here +

+

+ +

+``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md new file mode 100644 index 00000000000..c2c66766408 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -0,0 +1,621 @@ +--- +id: 5a8b073d06fa14fcfde687aa +title: Exercise Tracker +challengeType: 4 +forumTopicId: 301505 +dashedName: exercise-tracker +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://exercise-tracker.freecodecamp.rocks. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +Your responses should have the following structures. + +Exercise: + +```js +{ + username: "fcc_test", + description: "test", + duration: 60, + date: "Mon Jan 01 1990", + _id: "5fb5853f734231456ccb3b05" +} +``` + +User: + +```js +{ + username: "fcc_test", + _id: "5fb5853f734231456ccb3b05" +} +``` + +Log: + +```js +{ + username: "fcc_test", + count: 1, + _id: "5fb5853f734231456ccb3b05", + log: [{ + description: "test", + duration: 60, + date: "Mon Jan 01 1990", + }] +} +``` + +**Hint:** For the `date` property, the `toDateString` method of the `Date` API can be used to achieve the expected output. + +# --hints-- + +You should provide your own project, not the example URL. + +```js +(getUserInput) => { + const url = getUserInput('url'); + assert( + !/.*\/exercise-tracker\.freecodecamp\.rocks/.test(getUserInput('url')) + ); +}; +``` + +You can `POST` to `/api/users` with form data `username` to create a new user. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + assert.isTrue(res.ok); + if(!res.ok) { + throw new Error(`${res.status} ${res.statusText}`) + }; +}; +``` + +The returned response from `POST /api/users` with form data `username` will be an object with `username` and `_id` properties. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + if (res.ok) { + const { _id, username } = await res.json(); + assert.exists(_id); + assert.exists(username); + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can make a `GET` request to `/api/users` to get a list of all users. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users'); + assert.isTrue(res.ok); + if(!res.ok) { + throw new Error(`${res.status} ${res.statusText}`) + }; +}; +``` + +The `GET` request to `/api/users` returns an array. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users'); + if(res.ok){ + const users = await res.json(); + assert.isArray(users); + } else { + throw new Error(`${res.status} ${res.statusText}`); + }; +}; +``` + +Each element in the array returned from `GET /api/users` is an object literal containing a user's `username` and `_id`. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users'); + if(res.ok){ + const users = await res.json(); + const user = users[0]; + assert.exists(user); + assert.exists(user.username); + assert.exists(user._id); + assert.isString(user.username); + assert.isString(user._id); + } else { + throw new Error(`${res.status} ${res.statusText}`); + }; +}; +``` + +You can `POST` to `/api/users/:_id/exercises` with form data `description`, `duration`, and optionally `date`. If no date is supplied, the current date will be used. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + if (res.ok) { + const { _id, username } = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: 'Mon Jan 01 1990' + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` + }); + assert.isTrue(addRes.ok); + if(!addRes.ok) { + throw new Error(`${addRes.status} ${addRes.statusText}`) + }; + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +The response returned from `POST /api/users/:_id/exercises` will be the user object with the exercise fields added. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + if (res.ok) { + const { _id, username } = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: 'Mon Jan 01 1990' + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` + }); + if (addRes.ok) { + const actual = await addRes.json(); + assert.deepEqual(actual, expected); + assert.isString(actual.description); + assert.isNumber(actual.duration); + assert.isString(actual.date); + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can make a `GET` request to `/api/users/:_id/logs` to retrieve a full exercise log of any user. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + if (res.ok) { + const { _id, username } = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}` + }); + if (addRes.ok) { + const logRes = await fetch(url + `/api/users/${_id}/logs`); + assert.isTrue(logRes.ok); + if(!logRes.ok) { + throw new Error(`${logRes.status} ${logRes.statusText}`) + }; + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +A request to a user's log `GET /api/users/:_id/logs` returns a user object with a `count` property representing the number of exercises that belong to that user. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + if (res.ok) { + const { _id, username } = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}` + }); + if (addRes.ok) { + const logRes = await fetch(url + `/api/users/${_id}/logs`); + if (logRes.ok) { + const { count } = await logRes.json(); + assert(count); + } else { + throw new Error(`${logRes.status} ${logRes.statusText}`); + } + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +A `GET` request to `/api/users/:_id/logs` will return the user object with a `log` array of all the exercises added. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }) + if(res.ok){ + const {_id, username} = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}` + }); + if(addRes.ok){ + const logRes = await fetch(url + `/api/users/${_id}/logs`); + if(logRes.ok) { + const {log} = await logRes.json(); + assert.isArray(log); + assert.equal(1, log.length); + } else { + throw new Error(`${logRes.status} ${logRes.statusText}`); + } + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + }; + } else { + throw new Error(`${res.status} ${res.statusText}`) + }; +}; +``` + +Each item in the `log` array that is returned from `GET /api/users/:_id/logs` is an object that should have a `description`, `duration`, and `date` properties. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + `/api/users`, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + if(res.ok) { + const {_id, username} = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}` + }); + if(addRes.ok) { + const logRes = await fetch(url + `/api/users/${_id}/logs`); + if(logRes.ok) { + const {log} = await logRes.json(); + const exercise = log[0]; + assert.exists(exercise); + assert.exists(exercise.description); + assert.exists(exercise.duration); + assert.exists(exercise.date); + } else { + throw new Error(`${logRes.status} ${logRes.statusText}`); + }; + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + }; + } else { + throw new Error(`${res.status} ${res.statusText}`) + }; +}; +``` + +The `description` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a string. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users/', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `username=fcc_test_${Date.now()}`.substring(0,29) + }); + if(res.ok) { + const {_id, username} = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `description=${expected.description}&duration=${expected.duration}` + }); + if(addRes.ok) { + const logRes = await fetch(url + `/api/users/${_id}/logs`); + if(logRes.ok){ + const {log} = await logRes.json(); + const exercise = log[0]; + assert.isString(exercise.description); + assert.equal(exercise.description, expected.description); + } else { + throw new Error(`${logRes.status} ${logRes.statusText}`); + } + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + }; + } else { + throw new Error(`${res.status} ${res.statusText}`); + }; +}; +``` + +The `duration` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a number. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users/', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `username=fcc_test_${Date.now()}`.substring(0,29) + }); + if(res.ok) { + const {_id, username} = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `description=${expected.description}&duration=${expected.duration}` + }); + if(addRes.ok) { + const logRes = await fetch(url + `/api/users/${_id}/logs`); + if(logRes.ok){ + const {log} = await logRes.json(); + const exercise = log[0]; + assert.isNumber(exercise.duration); + assert.equal(exercise.duration, expected.duration); + } else { + throw new Error(`${logRes.status} ${logRes.statusText}`); + } + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + }; + } else { + throw new Error(`${res.status} ${res.statusText}`); + }; +}; +``` + +The `date` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a string. Use the `dateString` format of the `Date` API. + +```js +async(getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users/', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `username=fcc_test_${Date.now()}`.substring(0,29) + }); + if(res.ok) { + const {_id, username} = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `description=${expected.description}&duration=${expected.duration}` + }); + if(addRes.ok) { + const logRes = await fetch(url + `/api/users/${_id}/logs`); + if(logRes.ok){ + const {log} = await logRes.json(); + const exercise = log[0]; + assert.isString(exercise.date); + assert.equal(exercise.date, expected.date); + } else { + throw new Error(`${logRes.status} ${logRes.statusText}`); + } + } else { + throw new Error(`${addRes.status} ${addRes.statusText}`); + }; + } else { + throw new Error(`${res.status} ${res.statusText}`); + }; +}; +``` + +You can add `from`, `to` and `limit` parameters to a `GET /api/users/:_id/logs` request to retrieve part of the log of any user. `from` and `to` are dates in `yyyy-mm-dd` format. `limit` is an integer of how many logs to send back. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `username=fcc_test_${Date.now()}`.substring(0, 29) + }); + if (res.ok) { + const { _id, username } = await res.json(); + const expected = { + username, + description: 'test', + duration: 60, + _id, + date: new Date().toDateString() + }; + const addExerciseRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01` + }); + const addExerciseTwoRes = await fetch(url + `/api/users/${_id}/exercises`, { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-03` + }); + if (addExerciseRes.ok && addExerciseTwoRes.ok) { + const logRes = await fetch( + url + `/api/users/${_id}/logs?from=1989-12-31&to=1990-01-04` + ); + if (logRes.ok) { + const { log } = await logRes.json(); + assert.isArray(log); + assert.equal(2, log.length); + } else { + throw new Error(`${logRes.status} ${logRes.statusText}`); + } + const limitRes = await fetch( + url + `/api/users/${_id}/logs?limit=1` + ); + if (limitRes.ok) { + const { log } = await limitRes.json(); + assert.isArray(log); + assert.equal(1, log.length); + } else { + throw new Error(`${limitRes.status} ${limitRes.statusText}`); + } + const filterDateBeforeLimitRes = await fetch( + url + `/api/users/${_id}/logs?from=1990-01-02&to=1990-01-04&limit=1` + ); + if (filterDateBeforeLimitRes.ok) { + const { log } = await filterDateBeforeLimitRes.json(); + assert.isArray(log); + assert.equal(1, log.length); + } else { + throw new Error(`${filterDateBeforeLimitRes.status} ${filterDateBeforeLimitRes.statusText}`); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md new file mode 100644 index 00000000000..08d8e684c37 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md @@ -0,0 +1,77 @@ +--- +id: bd7158d8c443edefaeb5bdff +title: Request Header Parser Microservice +challengeType: 4 +forumTopicId: 301507 +dashedName: request-header-parser-microservice +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://request-header-parser-microservice.freecodecamp.rocks/. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --hints-- + +You should provide your own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/request-header-parser-microservice\.freecodecamp\.rocks/.test( + getUserInput('url') + ) + ); +}; +``` + +A request to `/api/whoami` should return a JSON object with your IP address in the `ipaddress` key. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/whoami').then( + (data) => assert(data.ipaddress && data.ipaddress.length > 0), + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +A request to `/api/whoami` should return a JSON object with your preferred language in the `language` key. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/whoami').then( + (data) => assert(data.language && data.language.length > 0), + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +A request to `/api/whoami` should return a JSON object with your software in the `software` key. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/whoami').then( + (data) => assert(data.software && data.software.length > 0), + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md new file mode 100644 index 00000000000..aa421f78ebd --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md @@ -0,0 +1,156 @@ +--- +id: bd7158d8c443edefaeb5bdef +title: Timestamp Microservice +challengeType: 4 +forumTopicId: 301508 +dashedName: timestamp-microservice +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://timestamp-microservice.freecodecamp.rocks. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +**Note:** Time zones conversion is not a purpose of this project, so assume all sent valid dates will be parsed with `new Date()` as GMT dates. + +# --hints-- + +You should provide your own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/timestamp-microservice\.freecodecamp\.rocks/.test(getUserInput('url')) + ); +}; +``` + +A request to `/api/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds (as type Number) + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/2016-12-25').then( + (data) => { + assert.equal( + data.unix, + 1482624000000, + 'Should be a valid unix timestamp' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +A request to `/api/:date?` with a valid date should return a JSON object with a `utc` key that is a string of the input date in the format: `Thu, 01 Jan 1970 00:00:00 GMT` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/2016-12-25').then( + (data) => { + assert.equal( + data.utc, + 'Sun, 25 Dec 2016 00:00:00 GMT', + 'Should be a valid UTC date string' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +A request to `/api/1451001600000` should return `{ unix: 1451001600000, utc: "Fri, 25 Dec 2015 00:00:00 GMT" }` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/1451001600000').then( + (data) => { + assert( + data.unix === 1451001600000 && + data.utc === 'Fri, 25 Dec 2015 00:00:00 GMT' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +Your project can handle dates that can be successfully parsed by `new Date(date_string)` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/05 October 2011, GMT').then( + (data) => { + assert( + data.unix === 1317772800000 && + data.utc === 'Wed, 05 Oct 2011 00:00:00 GMT' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +If the input date string is invalid, the api returns an object having the structure `{ error : "Invalid Date" }` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api/this-is-not-a-date').then( + (data) => { + assert.equal(data.error.toLowerCase(), 'invalid date'); + }, + (xhr) => { + assert(xhr.responseJSON.error.toLowerCase() === 'invalid date'); + } + ); +``` + +An empty date parameter should return the current time in a JSON object with a `unix` key + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api').then( + (data) => { + var now = Date.now(); + assert.approximately(data.unix, now, 20000); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +An empty date parameter should return the current time in a JSON object with a `utc` key + +```js +(getUserInput) => + $.get(getUserInput('url') + '/api').then( + (data) => { + var now = Date.now(); + var serverTime = new Date(data.utc).getTime(); + assert.approximately(serverTime, now, 20000); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md new file mode 100644 index 00000000000..64eb51f8e6f --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md @@ -0,0 +1,119 @@ +--- +id: bd7158d8c443edefaeb5bd0e +title: URL Shortener Microservice +challengeType: 4 +forumTopicId: 301509 +dashedName: url-shortener-microservice +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://url-shortener-microservice.freecodecamp.rocks. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +**HINT:** Do not forget to use a body parsing middleware to handle the POST requests. Also, you can use the function `dns.lookup(host, cb)` from the `dns` core module to verify a submitted URL. + +# --hints-- + +You should provide your own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/url-shortener-microservice\.freecodecamp\.rocks/.test( + getUserInput('url') + ) + ); +}; +``` + +You can POST a URL to `/api/shorturl` and get a JSON response with `original_url` and `short_url` properties. Here's an example: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}` + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const urlVariable = Date.now(); + const fullUrl = `${url}/?v=${urlVariable}` + const res = await fetch(url + '/api/shorturl', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `url=${fullUrl}` + }); + if (res.ok) { + const { short_url, original_url } = await res.json(); + assert.isNotNull(short_url); + assert.strictEqual(original_url, `${url}/?v=${urlVariable}`); + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +When you visit `/api/shorturl/`, you will be redirected to the original URL. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const urlVariable = Date.now(); + const fullUrl = `${url}/?v=${urlVariable}` + let shortenedUrlVariable; + const postResponse = await fetch(url + '/api/shorturl', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `url=${fullUrl}` + }); + if (postResponse.ok) { + const { short_url } = await postResponse.json(); + shortenedUrlVariable = short_url; + } else { + throw new Error(`${postResponse.status} ${postResponse.statusText}`); + } + const getResponse = await fetch( + url + '/api/shorturl/' + shortenedUrlVariable + ); + if (getResponse) { + const { redirected, url } = getResponse; + assert.isTrue(redirected); + assert.strictEqual(url,fullUrl); + } else { + throw new Error(`${getResponse.status} ${getResponse.statusText}`); + } +}; +``` + +If you pass an invalid URL that doesn't follow the valid `http://www.example.com` format, the JSON response will contain `{ error: 'invalid url' }` + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/shorturl', { + method: 'POST', + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + body: `url=ftp:/john-doe.invalidTLD` + }); + if (res.ok) { + const { error } = await res.json(); + assert.isNotNull(error); + assert.strictEqual(error.toLowerCase(), 'invalid url'); + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md new file mode 100644 index 00000000000..9d9fa53b85d --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md @@ -0,0 +1,79 @@ +--- +id: 587d7fb1367417b2b2512bf4 +title: Chain Middleware to Create a Time Server +challengeType: 2 +forumTopicId: 301510 +dashedName: chain-middleware-to-create-a-time-server +--- + +# --description-- + +Middleware can be mounted at a specific route using `app.METHOD(path, middlewareFunction)`. Middleware can also be chained within a route definition. + +Look at the following example: + +```js +app.get('/user', function(req, res, next) { + req.user = getTheUserSync(); // Hypothetical synchronous operation + next(); +}, function(req, res) { + res.send(req.user); +}); +``` + +This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors. Or you can pass control to the next matching route, to handle special cases. We will see how in the advanced Express section. + +# --instructions-- + +In the route `app.get('/now', ...)` chain a middleware function and the final handler. In the middleware function you should add the current time to the request object in the `req.time` key. You can use `new Date().toString()`. In the handler, respond with a JSON object, taking the structure `{time: req.time}`. + +**Note:** The test will not pass if you don’t chain the middleware. If you mount the function somewhere else, the test will fail, even if the output result is correct. + +# --hints-- + +The /now endpoint should have mounted middleware + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/chain-middleware-time').then( + (data) => { + assert.equal( + data.stackLength, + 2, + '"/now" route has no mounted middleware' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +The `/now` endpoint should return the current time. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/chain-middleware-time').then( + (data) => { + var now = new Date(); + assert.isAtMost( + Math.abs(new Date(data.time) - now), + 20000, + 'the returned time is not between +- 20 secs from now' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/get-route-parameter-input-from-the-client.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/get-route-parameter-input-from-the-client.md new file mode 100644 index 00000000000..b0055f569ea --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/get-route-parameter-input-from-the-client.md @@ -0,0 +1,65 @@ +--- +id: 587d7fb2367417b2b2512bf5 +title: Get Route Parameter Input from the Client +challengeType: 2 +forumTopicId: 301513 +dashedName: get-route-parameter-input-from-the-client +--- + +# --description-- + +When building an API, we have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object. + +
route_path: '/user/:userId/book/:bookId'
actual_request_URL: '/user/546/book/6754'
req.params: {userId: '546', bookId: '6754'}
+ +# --instructions-- + +Build an echo server, mounted at the route `GET /:word/echo`. Respond with a JSON object, taking the structure `{echo: word}`. You can find the word to be repeated at `req.params.word`. You can test your route from your browser's address bar, visiting some matching routes, e.g. `your-app-rootpath/freecodecamp/echo`. + +# --hints-- + +Test 1 : Your echo server should repeat words correctly + +```js +(getUserInput) => + $.get(getUserInput('url') + '/eChOtEsT/echo').then( + (data) => { + assert.equal( + data.echo, + 'eChOtEsT', + 'Test 1: the echo server is not working as expected' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +Test 2 : Your echo server should repeat words correctly + +```js +(getUserInput) => + $.get(getUserInput('url') + '/ech0-t3st/echo').then( + (data) => { + assert.equal( + data.echo, + 'ech0-t3st', + 'Test 2: the echo server is not working as expected' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/implement-a-root-level-request-logger-middleware.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/implement-a-root-level-request-logger-middleware.md new file mode 100644 index 00000000000..2a2faa35c39 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/implement-a-root-level-request-logger-middleware.md @@ -0,0 +1,57 @@ +--- +id: 587d7fb1367417b2b2512bf3 +title: Implement a Root-Level Request Logger Middleware +challengeType: 2 +forumTopicId: 301514 +dashedName: implement-a-root-level-request-logger-middleware +--- + +# --description-- + +Earlier, you were introduced to the `express.static()` middleware function. Now it’s time to see what middleware is, in more detail. Middleware functions are functions that take 3 arguments: the request object, the response object, and the next function in the application’s request-response cycle. These functions execute some code that can have side effects on the app, and usually add information to the request or response objects. They can also end the cycle by sending a response when some condition is met. If they don’t send the response when they are done, they start the execution of the next function in the stack. This triggers calling the 3rd argument, `next()`. + +Look at the following example: + +```js +function(req, res, next) { + console.log("I'm a middleware..."); + next(); +} +``` + +Let’s suppose you mounted this function on a route. When a request matches the route, it displays the string “I’m a middleware…”, then it executes the next function in the stack. In this exercise, you are going to build root-level middleware. As you have seen in challenge 4, to mount a middleware function at root level, you can use the `app.use()` method. In this case, the function will be executed for all the requests, but you can also set more specific conditions. For example, if you want a function to be executed only for POST requests, you could use `app.post()`. Analogous methods exist for all the HTTP verbs (GET, DELETE, PUT, …). + +# --instructions-- + +Build a simple logger. For every request, it should log to the console a string taking the following format: `method path - ip`. An example would look like this: `GET /json - ::ffff:127.0.0.1`. Note that there is a space between `method` and `path` and that the dash separating `path` and `ip` is surrounded by a space on both sides. You can get the request method (http verb), the relative route path, and the caller’s ip from the request object using `req.method`, `req.path` and `req.ip`. Remember to call `next()` when you are done, or your server will be stuck forever. Be sure to have the ‘Logs’ opened, and see what happens when some request arrives. + +**Note:** Express evaluates functions in the order they appear in the code. This is true for middleware too. If you want it to work for all the routes, it should be mounted before them. + +# --hints-- + +Root level logger middleware should be active + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/root-middleware-logger').then( + (data) => { + assert.isTrue( + data.passed, + 'root-level logger is not working as expected' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md new file mode 100644 index 00000000000..9f32d837b79 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md @@ -0,0 +1,53 @@ +--- +id: 587d7fb0367417b2b2512bed +title: Meet the Node console +challengeType: 2 +forumTopicId: 301515 +dashedName: meet-the-node-console +--- + +# --description-- + +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete these challenges locally. +- Use our Replit starter project to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + +During the development process, it is important to be able to check what’s going on in your code. + +Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Replit, a terminal is open in the right pane by default. + +We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur. + +# --instructions-- + +Modify the `myApp.js` file to log "Hello World" to the console. + +# --hints-- + +`"Hello World"` should be in the console + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/hello-console').then( + (data) => { + assert.isTrue(data.passed, '"Hello World" is not in the server console'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md new file mode 100644 index 00000000000..1d618673227 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md @@ -0,0 +1,51 @@ +--- +id: 587d7fb0367417b2b2512bef +title: Serve an HTML File +challengeType: 2 +forumTopicId: 301516 +dashedName: serve-an-html-file +--- + +# --description-- + +You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this: + +```js +absolutePath = __dirname + relativePath/file.ext +``` + +# --instructions-- + +Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that we will use later…), with no style applied. + +**Note:** You can edit the solution of the previous challenge or create a new one. If you create a new solution, keep in mind that Express evaluates routes from top to bottom, and executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string. + +# --hints-- + +Your app should serve the file views/index.html + +```js +(getUserInput) => + $.get(getUserInput('url')).then( + (data) => { + assert.match( + data, + /

.*<\/h1>/, + 'Your app does not serve the expected HTML' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md new file mode 100644 index 00000000000..1e977061c7c --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md @@ -0,0 +1,47 @@ +--- +id: 587d7fb1367417b2b2512bf1 +title: Serve JSON on a Specific Route +challengeType: 2 +forumTopicId: 301517 +dashedName: serve-json-on-a-specific-route +--- + +# --description-- + +While an HTML server serves HTML, an API serves data. A REST (REpresentational State Transfer) API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. These days, the preferred data format for moving information around the web is JSON. Simply put, JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted. + +Let's create a simple API by creating a route that responds with JSON at the path `/json`. You can do it as usual, with the `app.get()` method. Inside the route handler, use the method `res.json()`, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes, it converts a valid JavaScript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure `{key: data}`. `data` can be a number, a string, a nested object or an array. `data` can also be a variable or the result of a function call, in which case it will be evaluated before being converted into a string. + +# --instructions-- + +Serve the object `{"message": "Hello json"}` as a response, in JSON format, to GET requests to the `/json` route. Then point your browser to `your-app-url/json`, you should see the message on the screen. + +# --hints-- + +The endpoint `/json` should serve the json object `{"message": "Hello json"}` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/json').then( + (data) => { + assert.equal( + data.message, + 'Hello json', + "The '/json' endpoint does not serve the right data" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-static-assets.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-static-assets.md new file mode 100644 index 00000000000..f3e2796c54e --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/serve-static-assets.md @@ -0,0 +1,51 @@ +--- +id: 587d7fb0367417b2b2512bf0 +title: Serve Static Assets +challengeType: 2 +forumTopicId: 301518 +dashedName: serve-static-assets +--- + +# --description-- + +An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). + +In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets. + +If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests. + +# --instructions-- + +Mount the `express.static()` middleware to the path `/public` with `app.use()`. The absolute path to the assets folder is `__dirname + /public`. + +Now your app should be able to serve a CSS stylesheet. Note that the `/public/style.css` file is referenced in the `/views/index.html` in the project boilerplate. Your front-page should look a little better now! + +# --hints-- + +Your app should serve asset files from the `/public` directory to the `/public` path + +```js +(getUserInput) => + $.get(getUserInput('url') + '/public/style.css').then( + (data) => { + assert.match( + data, + /body\s*\{[^\}]*\}/, + 'Your app does not serve static assets' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/start-a-working-express-server.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/start-a-working-express-server.md new file mode 100644 index 00000000000..e8e3e82fc5a --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/start-a-working-express-server.md @@ -0,0 +1,57 @@ +--- +id: 587d7fb0367417b2b2512bee +title: Start a Working Express Server +challengeType: 2 +forumTopicId: 301519 +dashedName: start-a-working-express-server +--- + +# --description-- + +In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, we need the app to be running in the background so we added this method in the `server.js` file for you. + +Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler + +```js +function(req, res) { + res.send('Response String'); +} +``` + +will serve the string 'Response String'. + +# --instructions-- + +Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Replit. + +**Note:** All the code for these lessons should be added in between the few lines of code we have started you off with. + +# --hints-- + +Your app should serve the string 'Hello Express' + +```js +(getUserInput) => + $.get(getUserInput('url')).then( + (data) => { + assert.equal( + data, + 'Hello Express', + 'Your app does not serve the text "Hello Express"' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md new file mode 100644 index 00000000000..5d6ba3175d4 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md @@ -0,0 +1,63 @@ +--- +id: 587d7fb2367417b2b2512bf7 +title: Use body-parser to Parse POST Requests +challengeType: 2 +forumTopicId: 301520 +dashedName: use-body-parser-to-parse-post-requests +--- + +# --description-- + +Besides GET, there is another common HTTP verb, it is POST. POST is the default method used to send client data with HTML forms. In REST convention, POST is used to send data to create new items in the database (a new user, or a new blog post). You don’t have a database in this project, but you are going to learn how to handle POST requests anyway. + +In these kind of requests, the data doesn’t appear in the URL, it is hidden in the request body. The body is a part of the HTTP request, also called the payload. Even though the data is not visible in the URL, this does not mean that it is private. To see why, look at the raw content of an HTTP POST request: + +```http +POST /path/subpath HTTP/1.0 +From: john@example.com +User-Agent: someBrowser/1.0 +Content-Type: application/x-www-form-urlencoded +Content-Length: 20 + +name=John+Doe&age=25 +``` + +As you can see, the body is encoded like the query string. This is the default format used by HTML forms. With Ajax, you can also use JSON to handle data having a more complex structure. There is also another type of encoding: multipart/form-data. This one is used to upload binary files. In this exercise, you will use a URL encoded body. To parse the data coming from POST requests, you must use the `body-parser` package. This package allows you to use a series of middleware, which can decode data in different formats. + +# --instructions-- + +`body-parser` has already been installed and is in your project's `package.json` file. `require` it at the top of the `myApp.js` file and store it in a variable named `bodyParser`. The middleware to handle URL encoded data is returned by `bodyParser.urlencoded({extended: false})`. Pass the function returned by the previous method call to `app.use()`. As usual, the middleware must be mounted before all the routes that depend on it. + +**Note:** `extended` is a configuration option that tells `body-parser` which parsing needs to be used. When `extended=false` it uses the classic encoding `querystring` library. When `extended=true` it uses `qs` library for parsing. + +When using `extended=false`, values can be only strings or arrays. The object returned when using `querystring` does not prototypically inherit from the default JavaScript `Object`, which means functions like `hasOwnProperty`, `toString` will not be available. The extended version allows more data flexibility, but it is outmatched by JSON. + +# --hints-- + +The 'body-parser' middleware should be mounted + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/add-body-parser').then( + (data) => { + assert.isAbove( + data.mountedAt, + 0, + '"body-parser" is not mounted correctly' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md new file mode 100644 index 00000000000..80708e3fdb9 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md @@ -0,0 +1,54 @@ +--- +id: 587d7fb1367417b2b2512bf2 +title: Use the .env File +challengeType: 2 +forumTopicId: 301521 +dashedName: use-the--env-file +--- + +# --description-- + +The `.env` file is a hidden file that is used to pass environment variables to your application. This file is secret, no one but you can access it, and it can be used to store data that you want to keep private or hidden. For example, you can store API keys from external services or your database URI. You can also use it to store configuration options. By setting configuration options, you can change the behavior of your application, without the need to rewrite some code. + +The environment variables are accessible from the app as `process.env.VAR_NAME`. The `process.env` object is a global Node object, and variables are passed as strings. By convention, the variable names are all uppercase, with words separated by an underscore. The `.env` is a shell file, so you don’t need to wrap names or values in quotes. It is also important to note that there cannot be space around the equals sign when you are assigning values to your variables, e.g. `VAR_NAME=value`. Usually, you will put each variable definition on a separate line. + +# --instructions-- + +Let's add an environment variable as a configuration option. + +Create a `.env` file in the root of your project directory, and store the variable `MESSAGE_STYLE=uppercase` in it. + +Then, in the `/json` GET route handler you created in the last challenge access `process.env.MESSAGE_STYLE` and transform the response object's `message` to uppercase if the variable equals `uppercase`. The response object should either be `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`, depending on the `MESSAGE_STYLE` value. + +**Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in SECRETS tab to add the variable. + +If you are working locally, you will need the `dotenv` package. It loads environment variables from your `.env` file into `process.env`. The `dotenv` package has already been installed, and is in your project's `package.json` file. At the top of your `myApp.js` file, import and load the variables with `require('dotenv').config()`. + +# --hints-- + +The response of the endpoint `/json` should change according to the environment variable `MESSAGE_STYLE` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/use-env-vars').then( + (data) => { + assert.isTrue( + data.passed, + 'The response of "/json" does not change according to MESSAGE_STYLE' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/add-a-license-to-your-package.json.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/add-a-license-to-your-package.json.md new file mode 100644 index 00000000000..d97b0134019 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/add-a-license-to-your-package.json.md @@ -0,0 +1,48 @@ +--- +id: 587d7fb4367417b2b2512bfe +title: Add a License to Your package.json +challengeType: 2 +forumTopicId: 301523 +dashedName: add-a-license-to-your-package-json +--- + +# --description-- + +The `license` field is where you inform users of what they are allowed to do with your project. + +Some common licenses for open source projects include MIT and BSD. License information is not required, and copyright laws in most countries will give you ownership of what you create by default. However, it’s always a good practice to explicitly state what users can and can’t do. Here's an example of the license field: + +```json +"license": "MIT", +``` + +# --instructions-- + +Fill the `license` field in the package.json file of your project as you find suitable. + +# --hints-- + +package.json should have a valid "license" key + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert(packJson.license, '"license" is missing'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md new file mode 100644 index 00000000000..fa9056e0992 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md @@ -0,0 +1,77 @@ +--- +id: 587d7fb4367417b2b2512c00 +title: Expand Your Project with External Packages from npm +challengeType: 2 +forumTopicId: 301527 +dashedName: expand-your-project-with-external-packages-from-npm +--- + +# --description-- + +One of the biggest reasons to use a package manager, is their powerful dependency management. Instead of manually having to make sure that you get all dependencies whenever you set up a project on a new computer, npm automatically installs everything for you. But how can npm know exactly what your project needs? Meet the `dependencies` section of your package.json file. + +In this section, packages your project requires are stored using the following format: + +```json +"dependencies": { + "package-name": "version", + "express": "4.14.0" +} + +``` + +# --instructions-- + +Add version "1.1.0" of the `@freecodecamp/example` package to the `dependencies` field of your `package.json` file. + +**Note:** `@freecodecamp/example` is a faux package used as a learning tool. + +# --hints-- + +`"dependencies"` should include `"@freecodecamp/example"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +`"@freecodecamp/example"` version should be `"1.1.0"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.match( + packJson.dependencies["@freecodecamp/example"], + /^[\^\~]?1\.1\.0/, + 'Wrong version of "@freecodecamp/example" installed. It should be 1.1.0' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md new file mode 100644 index 00000000000..b6adcfd5061 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md @@ -0,0 +1,60 @@ +--- +id: 587d7fb3367417b2b2512bfb +title: 'How to Use package.json, the Core of Any Node.js Project or npm Package' +challengeType: 2 +forumTopicId: 301528 +dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package +--- + +# --description-- + +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete these challenges locally. +- Use our Replit starter project to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + +The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the <head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers. + +If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges. + +One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project. + +```json +"author": "Jane Doe", +``` + +# --instructions-- + +Add your name as the `author` of the project in the package.json file. + +**Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,). + +# --hints-- + +package.json should have a valid "author" key + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert(packJson.author, '"author" is missing'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md new file mode 100644 index 00000000000..fa43e78268a --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md @@ -0,0 +1,73 @@ +--- +id: 587d7fb5367417b2b2512c01 +title: Manage npm Dependencies By Understanding Semantic Versioning +challengeType: 2 +forumTopicId: 301529 +dashedName: manage-npm-dependencies-by-understanding-semantic-versioning +--- + +# --description-- + +`Versions` of the npm packages in the dependencies section of your package.json file follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes projects can expect if they update. + +Knowing SemVer can be useful when you develop software that uses external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things that worked yesterday suddenly don’t work today. This is how Semantic Versioning works according to the official website: + +```json +"package": "MAJOR.MINOR.PATCH" +``` + +The MAJOR version should increment when you make incompatible API changes. The MINOR version should increment when you add functionality in a backwards-compatible manner. The PATCH version should increment when you make backwards-compatible bug fixes. This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions. + +# --instructions-- + +In the dependencies section of your `package.json` file, change the version of `@freecodecamp/example` to match MAJOR version 1, MINOR version 2 and PATCH version 13 + +# --hints-- + +`"dependencies"` should include `"@freecodecamp/example"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +`"@freecodecamp/example"` version should be `"1.2.13"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.equal( + packJson.dependencies["@freecodecamp/example"], + '1.2.13', + 'Wrong version of "@freecodecamp/example". It should be 1.2.13' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md new file mode 100644 index 00000000000..2d05d271d17 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md @@ -0,0 +1,52 @@ +--- +id: 587d7fb5367417b2b2512c04 +title: Remove a Package from Your Dependencies +challengeType: 2 +forumTopicId: 301530 +dashedName: remove-a-package-from-your-dependencies +--- + +# --description-- + +You have now tested a few ways you can manage dependencies of your project by using the package.json's dependencies section. You have also included external packages by adding them to the file and even told npm what types of versions you want, by using special characters such as the tilde or the caret. + +But what if you want to remove an external package that you no longer need? You might already have guessed it, just remove the corresponding key-value pair for that package from your dependencies. + +This same method applies to removing other fields in your package.json as well. + +# --instructions-- + +Remove the `@freecodecamp/example` package from your dependencies. + +**Note:** Make sure you have the right amount of commas after removing it. + +# --hints-- + +`"dependencies"` should not include `"@freecodecamp/example"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.notProperty( + packJson.dependencies, + '@freecodecamp/example', + '"dependencies" still includes "@freecodecamp/example"' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md new file mode 100644 index 00000000000..84b47b8d7b7 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md @@ -0,0 +1,75 @@ +--- +id: 587d7fb5367417b2b2512c03 +title: Use the Caret-Character to Use the Latest Minor Version of a Dependency +challengeType: 2 +forumTopicId: 301531 +dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency +--- + +# --description-- + +Similar to how the tilde we learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes. + +Your current version of `@freecodecamp/example` should be "~1.2.13" which allows npm to install to the latest 1.2.x version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any 1.x.x version. + +```json +"package": "^1.3.8" +``` + +This would allow updates to any 1.x.x version of the package. + +# --instructions-- + +Use the caret (`^`) to prefix the version of `@freecodecamp/example` in your dependencies and allow npm to update it to any new MINOR release. + +**Note:** The version numbers themselves should not be changed. + +# --hints-- + +`"dependencies"` should include `"@freecodecamp/example"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +`"@freecodecamp/example"` version should match `"^1.x.x"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.match( + packJson.dependencies["@freecodecamp/example"], + /^\^1\./, + 'Wrong version of "@freecodecamp/example". It should be ^1.2.13' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md new file mode 100644 index 00000000000..0ef31ff5846 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md @@ -0,0 +1,75 @@ +--- +id: 587d7fb5367417b2b2512c02 +title: Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency +challengeType: 2 +forumTopicId: 301532 +dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency +--- + +# --description-- + +In the last challenge, you told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases, you don’t want to miss bug fixes since they often include important security patches and (hopefully) don’t break things in doing so. + +To allow an npm dependency to update to the latest PATCH version, you can prefix the dependency’s version with the tilde (`~`) character. Here's an example of how to allow updates to any 1.3.x version. + +```json +"package": "~1.3.8" +``` + +# --instructions-- + +In the package.json file, your current rule for how npm may upgrade `@freecodecamp/example` is to use a specific version (1.2.13). But now, you want to allow the latest 1.2.x version. + +Use the tilde (`~`) character to prefix the version of `@freecodecamp/example` in your dependencies, and allow npm to update it to any new _patch_ release. + +**Note:** The version numbers themselves should not be changed. + +# --hints-- + +`"dependencies"` should include `"@freecodecamp/example"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +`"@freecodecamp/example"` version should match `"~1.2.13"`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.match( + packJson.dependencies["@freecodecamp/example"], + /^\~1\.2\.13/, + 'Wrong version of "@freecodecamp/example". It should be ~1.2.13' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md new file mode 100644 index 00000000000..12be099f8ab --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md @@ -0,0 +1,76 @@ +--- +id: 587d7fb9367417b2b2512c12 +title: Chain Search Query Helpers to Narrow Search Results +challengeType: 2 +forumTopicId: 301533 +dashedName: chain-search-query-helpers-to-narrow-search-results +--- + +# --description-- + +If you don’t pass the callback as the last argument to `Model.find()` (or to the other search methods), the query is not executed. You can store the query in a variable for later use. This kind of object enables you to build up a query using chaining syntax. The actual db search is executed when you finally chain the method `.exec()`. You always need to pass your callback to this last method. There are many query helpers, here we'll use the most commonly used. + +# --instructions-- + +Modify the `queryChain` function to find people who like the food specified by the variable named `foodToSearch`. Sort them by `name`, limit the results to two documents, and hide their age. Chain `.find()`, `.sort()`, `.limit()`, `.select()`, and then `.exec()`. Pass the `done(err, data)` callback to `exec()`. + +# --hints-- + +Chaining query helpers should succeed + +```js +(getUserInput) => + $.ajax({ + url: getUserInput('url') + '/_api/query-tools', + type: 'POST', + contentType: 'application/json', + data: JSON.stringify([ + { name: 'Pablo', age: 26, favoriteFoods: ['burrito', 'hot-dog'] }, + { name: 'Bob', age: 23, favoriteFoods: ['pizza', 'nachos'] }, + { name: 'Ashley', age: 32, favoriteFoods: ['steak', 'burrito'] }, + { name: 'Mario', age: 51, favoriteFoods: ['burrito', 'prosciutto'] } + ]) + }).then( + (data) => { + assert.isArray(data, 'the response should be an Array'); + assert.equal( + data.length, + 2, + 'the data array length is not what expected' + ); + assert.notProperty( + data[0], + 'age', + 'The returned first item has too many properties' + ); + assert.equal( + data[0].name, + 'Ashley', + 'The returned first item name is not what expected' + ); + assert.notProperty( + data[1], + 'age', + 'The returned second item has too many properties' + ); + assert.equal( + data[1].name, + 'Mario', + 'The returned second item name is not what expected' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md new file mode 100644 index 00000000000..443db8e5930 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md @@ -0,0 +1,88 @@ +--- +id: 587d7fb6367417b2b2512c07 +title: Create a Model +challengeType: 2 +forumTopicId: 301535 +dashedName: create-a-model +--- + +# --description-- + +**C**RUD Part I - CREATE + +First of all, we need a Schema. Each schema maps to a MongoDB collection. It defines the shape of the documents within that collection. Schemas are building blocks for Models. They can be nested to create complex models, but in this case, we'll keep things simple. A model allows you to create instances of your objects, called documents. + +Replit is a real server, and in real servers, the interactions with the database happen in handler functions. These functions are executed when some event happens (e.g. someone hits an endpoint on your API). We’ll follow the same approach in these exercises. The `done()` function is a callback that tells us that we can proceed after completing an asynchronous operation such as inserting, searching, updating, or deleting. It's following the Node convention, and should be called as `done(null, data)` on success, or `done(err)` on error. + +Warning - When interacting with remote services, errors may occur! + +```js +/* Example */ + +const someFunc = function(done) { + //... do something (risky) ... + if (error) return done(error); + done(null, result); +}; +``` + +# --instructions-- + +Create a person schema called `personSchema` having this prototype: + +```markup +- Person Prototype - +-------------------- +name : string [required] +age : number +favoriteFoods : array of strings (*) +``` + +Use the Mongoose basic schema types. If you want you can also add more fields, use simple validators like required or unique, and set default values. See our Mongoose article. + +Now, create a model called `Person` from the `personSchema`. + +# --hints-- + +Creating an instance from a mongoose schema should succeed + +```js +(getUserInput) => + $.post(getUserInput('url') + '/_api/mongoose-model', { + name: 'Mike', + age: 28, + favoriteFoods: ['pizza', 'cheese'] + }).then( + (data) => { + assert.equal(data.name, 'Mike', '"model.name" is not what expected'); + assert.equal(data.age, '28', '"model.age" is not what expected'); + assert.isArray( + data.favoriteFoods, + '"model.favoriteFoods" is not an Array' + ); + assert.include( + data.favoriteFoods, + 'pizza', + '"model.favoriteFoods" does not include the expected items' + ); + assert.include( + data.favoriteFoods, + 'cheese', + '"model.favoriteFoods" does not include the expected items' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md new file mode 100644 index 00000000000..ae385b6b21d --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md @@ -0,0 +1,56 @@ +--- +id: 587d7fb6367417b2b2512c09 +title: Create and Save a Record of a Model +challengeType: 2 +forumTopicId: 301536 +dashedName: create-and-save-a-record-of-a-model +--- + +# --description-- + +In this challenge you will have to create and save a record of a model. + +# --instructions-- + +Within the `createAndSavePerson` function, create a document instance using the `Person` model constructor you built before. Pass to the constructor an object having the fields `name`, `age`, and `favoriteFoods`. Their types must conform to the ones in the `personSchema`. Then, call the method `document.save()` on the returned document instance. Pass to it a callback using the Node convention. This is a common pattern; all the following CRUD methods take a callback function like this as the last argument. + +```js +/* Example */ + +// ... +person.save(function(err, data) { + // ...do your stuff here... +}); +``` + +# --hints-- + +Creating and saving a db item should succeed + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/create-and-save-person').then( + (data) => { + assert.isString(data.name, '"item.name" should be a String'); + assert.isNumber(data.age, '28', '"item.age" should be a Number'); + assert.isArray( + data.favoriteFoods, + '"item.favoriteFoods" should be an Array' + ); + assert.equal(data.__v, 0, 'The db item should be not previously edited'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md new file mode 100644 index 00000000000..08812efbd1b --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md @@ -0,0 +1,68 @@ +--- +id: 587d7fb7367417b2b2512c0a +title: Create Many Records with model.create() +challengeType: 2 +forumTopicId: 301537 +dashedName: create-many-records-with-model-create +--- + +# --description-- + +Sometimes you need to create many instances of your models, e.g. when seeding a database with initial data. `Model.create()` takes an array of objects like `[{name: 'John', ...}, {...}, ...]` as the first argument, and saves them all in the db. + +# --instructions-- + +Modify the `createManyPeople` function to create many people using `Model.create()` with the argument `arrayOfPeople`. + +**Note:** You can reuse the model you instantiated in the previous exercise. + +# --hints-- + +Creating many db items at once should succeed + +```js +(getUserInput) => + $.ajax({ + url: getUserInput('url') + '/_api/create-many-people', + type: 'POST', + contentType: 'application/json', + data: JSON.stringify([ + { name: 'John', age: 24, favoriteFoods: ['pizza', 'salad'] }, + { name: 'Mary', age: 21, favoriteFoods: ['onions', 'chicken'] } + ]) + }).then( + (data) => { + assert.isArray(data, 'the response should be an array'); + assert.equal( + data.length, + 2, + 'the response does not contain the expected number of items' + ); + assert.equal(data[0].name, 'John', 'The first item is not correct'); + assert.equal( + data[0].__v, + 0, + 'The first item should be not previously edited' + ); + assert.equal(data[1].name, 'Mary', 'The second item is not correct'); + assert.equal( + data[1].__v, + 0, + 'The second item should be not previously edited' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md new file mode 100644 index 00000000000..7709b5fd5d3 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md @@ -0,0 +1,57 @@ +--- +id: 587d7fb8367417b2b2512c11 +title: Delete Many Documents with model.remove() +challengeType: 2 +forumTopicId: 301538 +dashedName: delete-many-documents-with-model-remove +--- + +# --description-- + +`Model.remove()` is useful to delete all the documents matching given criteria. + +# --instructions-- + +Modify the `removeManyPeople` function to delete all the people whose name is within the variable `nameToRemove`, using `Model.remove()`. Pass it to a query document with the `name` field set, and a callback. + +**Note:** The `Model.remove()` doesn’t return the deleted document, but a JSON object containing the outcome of the operation, and the number of items affected. Don’t forget to pass it to the `done()` callback, since we use it in tests. + +# --hints-- + +Deleting many items at once should succeed + +```js +(getUserInput) => + $.ajax({ + url: getUserInput('url') + '/_api/remove-many-people', + type: 'POST', + contentType: 'application/json', + data: JSON.stringify([ + { name: 'Mary', age: 16, favoriteFoods: ['lollipop'] }, + { name: 'Mary', age: 21, favoriteFoods: ['steak'] } + ]) + }).then( + (data) => { + assert.isTrue(!!data.ok, 'The mongo stats are not what expected'); + assert.equal( + data.n, + 2, + 'The number of items affected is not what expected' + ); + assert.equal(data.count, 0, 'the db items count is not what expected'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md new file mode 100644 index 00000000000..f010b51c40e --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md @@ -0,0 +1,53 @@ +--- +id: 587d7fb8367417b2b2512c10 +title: Delete One Document Using model.findByIdAndRemove +challengeType: 2 +forumTopicId: 301539 +dashedName: delete-one-document-using-model-findbyidandremove +--- + +# --description-- + +`findByIdAndRemove` and `findOneAndRemove` are like the previous update methods. They pass the removed document to the db. As usual, use the function argument `personId` as the search key. + +# --instructions-- + +Modify the `removeById` function to delete one person by the person's `_id`. You should use one of the methods `findByIdAndRemove()` or `findOneAndRemove()`. + +# --hints-- + +Deleting an item should succeed + +```js +(getUserInput) => + $.post(getUserInput('url') + '/_api/remove-one-person', { + name: 'Jason Bourne', + age: 36, + favoriteFoods: ['apples'] + }).then( + (data) => { + assert.equal(data.name, 'Jason Bourne', 'item.name is not what expected'); + assert.equal(data.age, 36, 'item.age is not what expected'); + assert.deepEqual( + data.favoriteFoods, + ['apples'], + 'item.favoriteFoods is not what expected' + ); + assert.equal(data.__v, 0); + assert.equal(data.count, 0, 'the db items count is not what expected'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md new file mode 100644 index 00000000000..826b4b3ab6c --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -0,0 +1,79 @@ +--- +id: 587d7fb6367417b2b2512c06 +title: Install and Set Up Mongoose +challengeType: 2 +forumTopicId: 301540 +dashedName: install-and-set-up-mongoose +--- + +# --description-- + +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete these challenges locally. +- Use our Replit starter project to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + +In this challenge, you will set up a MongoDB Atlas database and import the required packages to connect to it. + +Follow this tutorial to set up a hosted database on MongoDB Atlas. + +# --instructions-- + +`mongoose@^5.11.15` has been added to your project’s `package.json` file. First, require mongoose as `mongoose` in `myApp.js`. Next, create a `.env` file and add a `MONGO_URI` variable to it. Its value should be your MongoDB Atlas database URI. Be sure to surround the URI with single or double quotes, and remember that you can't use spaces around the `=` in environment variables. For example, `MONGO_URI='VALUE'`. + +**Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in SECRETS tab to add the variable. Do not surround the values with quotes when using the SECRETS tab. + +When you are done, connect to the database using the following syntax: + +```js +mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true }); +``` + +# --hints-- + +"mongoose version ^5.11.15" dependency should be in package.json + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/file/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property(packJson.dependencies, 'mongoose'); + assert.match( + packJson.dependencies.mongoose, + /^\^5\.11\.15/, + 'Wrong version of "mongoose". It should be ^5.11.15' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +"mongoose" should be connected to a database + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/is-mongoose-ok').then( + (data) => { + assert.isTrue(data.isMongooseOk, 'mongoose is not connected'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md new file mode 100644 index 00000000000..b25e2cf8ba8 --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md @@ -0,0 +1,54 @@ +--- +id: 587d7fb8367417b2b2512c0e +title: 'Perform Classic Updates by Running Find, Edit, then Save' +challengeType: 2 +forumTopicId: 301541 +dashedName: perform-classic-updates-by-running-find-edit-then-save +--- + +# --description-- + +In the good old days, this was what you needed to do if you wanted to edit a document, and be able to use it somehow (e.g. sending it back in a server response). Mongoose has a dedicated updating method: `Model.update()`. It is bound to the low-level mongo driver. It can bulk-edit many documents matching certain criteria, but it doesn’t send back the updated document, only a 'status' message. Furthermore, it makes model validations difficult, because it just directly calls the mongo driver. + +# --instructions-- + +Modify the `findEditThenSave` function to find a person by `_id` (use any of the above methods) with the parameter `personId` as search key. Add `"hamburger"` to the list of the person's `favoriteFoods` (you can use `Array.push()`). Then - inside the find callback - `save()` the updated `Person`. + +**Note:** This may be tricky, if in your Schema, you declared `favoriteFoods` as an Array, without specifying the type (i.e. `[String]`). In that case, `favoriteFoods` defaults to Mixed type, and you have to manually mark it as edited using `document.markModified('edited-field')`. See our Mongoose article. + +# --hints-- + +Find-edit-update an item should succeed + +```js +(getUserInput) => + $.post(getUserInput('url') + '/_api/find-edit-save', { + name: 'Poldo', + age: 40, + favoriteFoods: ['spaghetti'] + }).then( + (data) => { + assert.equal(data.name, 'Poldo', 'item.name is not what is expected'); + assert.equal(data.age, 40, 'item.age is not what expected'); + assert.deepEqual( + data.favoriteFoods, + ['spaghetti', 'hamburger'], + 'item.favoriteFoods is not what expected' + ); + assert.equal(data.__v, 1, 'The item should be previously edited'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md new file mode 100644 index 00000000000..ddd4ecd80ad --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md @@ -0,0 +1,58 @@ +--- +id: 587d7fb8367417b2b2512c0f +title: Perform New Updates on a Document Using model.findOneAndUpdate() +challengeType: 2 +forumTopicId: 301542 +dashedName: perform-new-updates-on-a-document-using-model-findoneandupdate +--- + +# --description-- + +Recent versions of Mongoose have methods to simplify documents updating. Some more advanced features (i.e. pre/post hooks, validation) behave differently with this approach, so the classic method is still useful in many situations. `findByIdAndUpdate()` can be used when searching by id. + +# --instructions-- + +Modify the `findAndUpdate` function to find a person by `Name` and set the person's age to `20`. Use the function parameter `personName` as the search key. + +**Note:** You should return the updated document. To do that, you need to pass the options document `{ new: true }` as the 3rd argument to `findOneAndUpdate()`. By default, these methods return the unmodified object. + +# --hints-- + +findOneAndUpdate an item should succeed + +```js +(getUserInput) => + $.post(getUserInput('url') + '/_api/find-one-update', { + name: 'Dorian Gray', + age: 35, + favoriteFoods: ['unknown'] + }).then( + (data) => { + assert.equal(data.name, 'Dorian Gray', 'item.name is not what expected'); + assert.equal(data.age, 20, 'item.age is not what expected'); + assert.deepEqual( + data.favoriteFoods, + ['unknown'], + 'item.favoriteFoods is not what expected' + ); + assert.equal( + data.__v, + 0, + 'findOneAndUpdate does not increment version by design!' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md new file mode 100644 index 00000000000..a3e22a5b1eb --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md @@ -0,0 +1,53 @@ +--- +id: 587d7fb7367417b2b2512c0b +title: Use model.find() to Search Your Database +challengeType: 2 +forumTopicId: 301543 +dashedName: use-model-find-to-search-your-database +--- + +# --description-- + +In its simplest usage, `Model.find()` accepts a query document (a JSON object) as the first argument, then a callback. It returns an array of matches. It supports an extremely wide range of search options. Read more in the docs. + +# --instructions-- + +Modify the `findPeopleByName` function to find all the people having a given name, using Model.find() -\> [Person] + +Use the function argument `personName` as the search key. + +# --hints-- + +Find all items corresponding to a criteria should succeed + +```js +(getUserInput) => + $.post(getUserInput('url') + '/_api/find-all-by-name', { + name: 'r@nd0mN4m3', + age: 24, + favoriteFoods: ['pizza'] + }).then( + (data) => { + assert.isArray(data, 'the response should be an Array'); + assert.equal( + data[0].name, + 'r@nd0mN4m3', + 'item.name is not what expected' + ); + assert.equal(data[0].__v, 0, 'The item should be not previously edited'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md new file mode 100644 index 00000000000..36c2b551e1d --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md @@ -0,0 +1,48 @@ +--- +id: 587d7fb7367417b2b2512c0d +title: Use model.findById() to Search Your Database By _id +challengeType: 2 +forumTopicId: 301544 +dashedName: use-model-findbyid-to-search-your-database-by-id +--- + +# --description-- + +When saving a document, MongoDB automatically adds the field `_id`, and set it to a unique alphanumeric key. Searching by `_id` is an extremely frequent operation, so Mongoose provides a dedicated method for it. + +# --instructions-- + +Modify the `findPersonById` to find the only person having a given `_id`, using `Model.findById() -> Person`. Use the function argument `personId` as the search key. + +# --hints-- + +Find an item by Id should succeed + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/find-by-id').then( + (data) => { + assert.equal(data.name, 'test', 'item.name is not what expected'); + assert.equal(data.age, 0, 'item.age is not what expected'); + assert.deepEqual( + data.favoriteFoods, + ['none'], + 'item.favoriteFoods is not what expected' + ); + assert.equal(data.__v, 0, 'The item should be not previously edited'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md new file mode 100644 index 00000000000..e7f9c78278b --- /dev/null +++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md @@ -0,0 +1,51 @@ +--- +id: 587d7fb7367417b2b2512c0c +title: Use model.findOne() to Return a Single Matching Document from Your Database +challengeType: 2 +forumTopicId: 301545 +dashedName: use-model-findone-to-return-a-single-matching-document-from-your-database +--- + +# --description-- + +`Model.findOne()` behaves like `Model.find()`, but it returns only one document (not an array), even if there are multiple items. It is especially useful when searching by properties that you have declared as unique. + +# --instructions-- + +Modify the `findOneByFood` function to find just one person which has a certain food in the person's favorites, using `Model.findOne() -> Person`. Use the function argument `food` as search key. + +# --hints-- + +Find one item should succeed + +```js +(getUserInput) => + $.post(getUserInput('url') + '/_api/find-one-by-food', { + name: 'Gary', + age: 46, + favoriteFoods: ['chicken salad'] + }).then( + (data) => { + assert.equal(data.name, 'Gary', 'item.name is not what expected'); + assert.deepEqual( + data.favoriteFoods, + ['chicken salad'], + 'item.favoriteFoods is not what expected' + ); + assert.equal(data.__v, 0, 'The item should be not previously edited'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-strategies.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-strategies.md new file mode 100644 index 00000000000..cefe1bd8493 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-strategies.md @@ -0,0 +1,96 @@ +--- +id: 5895f70df9fc0f352b528e68 +title: Authentication Strategies +challengeType: 2 +forumTopicId: 301547 +dashedName: authentication-strategies +--- + +# --description-- + +A strategy is a way of authenticating a user. You can use a strategy for allowing users to authenticate based on locally saved information (if you have them register first) or from a variety of providers such as Google or GitHub. For this project, we will use Passport middleware. Passport provides a comprehensive set of strategies that support authentication using a username and password, GitHub, Google, and more. + +`passport-local@~1.0.0` has already been added as a dependency, so add it to your server as follows: `const LocalStrategy = require('passport-local');` + +Now you will have to tell passport to **use** an instantiated LocalStrategy object with a few settings defined. Make sure this (as well as everything from this point on) is encapsulated in the database connection since it relies on it! + +```js +passport.use(new LocalStrategy( + function(username, password, done) { + myDataBase.findOne({ username: username }, function (err, user) { + console.log('User '+ username +' attempted to log in.'); + if (err) { return done(err); } + if (!user) { return done(null, false); } + if (password !== user.password) { return done(null, false); } + return done(null, user); + }); + } +)); +``` + +This is defining the process to use when we try to authenticate someone locally. First, it tries to find a user in our database with the username entered, then it checks for the password to match, then finally, if no errors have popped up that we checked for, like an incorrect password, the `user`'s object is returned and they are authenticated. + +Many strategies are set up using different settings, but generally it is easy to set it up based on the README in that strategy's repository. A good example of this is the GitHub strategy where we don't need to worry about a username or password because the user will be sent to GitHub's auth page to authenticate. As long as they are logged in and agree then GitHub returns their profile for us to use. + +In the next step, we will set up how to actually call the authentication strategy to validate a user based on form data! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Passport-local should be a dependency. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'passport-local', + 'Your project should list "passport-local " as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Passport-local should be correctly required and setup. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /require.*("|')passport-local("|')/gi, + 'You should have required passport-local' + ); + assert.match( + data, + /new LocalStrategy/gi, + 'You should have told passport to use a new strategy' + ); + assert.match( + data, + /findOne/gi, + 'Your new local strategy should use the findOne query to find a username based on the inputs' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md new file mode 100644 index 00000000000..875496d7166 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md @@ -0,0 +1,154 @@ +--- +id: 589fc831f9fc0f352b528e77 +title: Authentication with Socket.IO +challengeType: 2 +forumTopicId: 301548 +dashedName: authentication-with-socket-io +--- + +# --description-- + +Currently, you cannot determine who is connected to your web socket. While `req.user` contains the user object, that's only when your user interacts with the web server, and with web sockets you have no `req` (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple! + +`passport.socketio@~3.7.0`, `connect-mongo@~3.2.0`, and `cookie-parser@~1.4.5` have already been added as dependencies. Require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this: + +```js +const MongoStore = require('connect-mongo')(session); +const URI = process.env.MONGO_URI; +const store = new MongoStore({ url: URI }); +``` + +Now we just have to tell Socket.IO to use it and set the options. Be sure this is added before the existing socket code and not in the existing connection listener. For your server, it should look like this: + +```js +io.use( + passportSocketIo.authorize({ + cookieParser: cookieParser, + key: 'express.sid', + secret: process.env.SESSION_SECRET, + store: store, + success: onAuthorizeSuccess, + fail: onAuthorizeFail + }) +); +``` + +Note that configuring Passport authentication for Socket.IO is very similar to the way we configured the `session` middleware for the API. This is because they are meant to use the same authentication method — get the session id from a cookie and validate it. + +Previously, when we configured the `session` middleware, we didn't explicitly set the cookie name for session (`key`). This is because the `session` package was using the default value. Now that we've added another package which needs access to the same value from the cookies, we need to explicitly set the `key` value in both configuration objects. + +Be sure to add the `key` with the cookie name to the `session` middleware that matches the Socket.IO key. Also, add the `store` reference to the options, near where we set `saveUninitialized: true`. This is necessary to tell Socket.IO which session to relate to. + +
+ +Now, define the `success`, and `fail` callback functions: + +```js +function onAuthorizeSuccess(data, accept) { + console.log('successful connection to socket.io'); + + accept(null, true); +} + +function onAuthorizeFail(data, message, error, accept) { + if (error) throw new Error(message); + console.log('failed connection to socket.io:', message); + accept(null, false); +} +``` + +The user object is now accessible on your socket object as `socket.request.user`. For example, now you can add the following: + +```js +console.log('user ' + socket.request.user.name + ' connected'); +``` + +It will log to the server console who has connected! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254. + +# --hints-- + +`passport.socketio` should be a dependency. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'passport.socketio', + 'Your project should list "passport.socketio" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +`cookie-parser` should be a dependency. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'cookie-parser', + 'Your project should list "cookie-parser" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +passportSocketIo should be properly required. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /require\((['"])passport\.socketio\1\)/gi, + 'You should correctly require and instantiate "passport.socketio"' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +passportSocketIo should be properly setup. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /io\.use\(\s*\w+\.authorize\(/, + 'You should register "passport.socketio" as socket.io middleware and provide it correct options' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md new file mode 100644 index 00000000000..417ca5d7c41 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md @@ -0,0 +1,64 @@ +--- +id: 589690e6f9fc0f352b528e6e +title: Clean Up Your Project with Modules +challengeType: 2 +forumTopicId: 301549 +dashedName: clean-up-your-project-with-modules +--- + +# --description-- + +Right now, everything you have is in your `server.js` file. This can lead to hard to manage code that isn't very expandable. Create 2 new files: `routes.js` and `auth.js` + +Both should start with the following code: + +```js +module.exports = function (app, myDataBase) { + +} +``` + +Now, in the top of your server file, require these files like so: `const routes = require('./routes.js');` Right after you establish a successful connection with the database, instantiate each of them like so: `routes(app, myDataBase)` + +Finally, take all of the routes in your server and paste them into your new files, and remove them from your server file. Also take the `ensureAuthenticated` function, since it was specifically created for routing. Now, you will have to correctly add the dependencies in which are used, such as `const passport = require('passport');`, at the very top, above the export line in your `routes.js` file. + +Keep adding them until no more errors exist, and your server file no longer has any routing (**except for the route in the catch block**)! + +Now do the same thing in your auth.js file with all of the things related to authentication such as the serialization and the setting up of the local strategy and erase them from your server file. Be sure to add the dependencies in and call `auth(app, myDataBase)` in the server in the same spot. + +Submit your page when you think you've got it right. If you're running into errors, you can check out an example of the completed project. + +# --hints-- + +Modules should be present. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /require\s*\(('|")\.\/routes(\.js)?\1\)/gi, + 'You should have required your new files' + ); + assert.match( + data, + /client\s*\.db[^]*routes/gi, + 'Your new modules should be called after your connection to the database' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md new file mode 100644 index 00000000000..168908a3841 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md @@ -0,0 +1,107 @@ +--- +id: 589fc831f9fc0f352b528e75 +title: Communicate by Emitting +challengeType: 2 +forumTopicId: 301550 +dashedName: communicate-by-emitting +--- + +# --description-- + +Emit is the most common way of communicating you will use. When you emit something from the server to 'io', you send an event's name and data to all the connected sockets. A good example of this concept would be emitting the current count of connected users each time a new user connects! + +Start by adding a variable to keep track of the users, just before where you are currently listening for connections. + +```js +let currentUsers = 0; +``` + +Now, when someone connects, you should increment the count before emitting the count. So, you will want to add the incrementer within the connection listener. + +```js +++currentUsers; +``` + +Finally, after incrementing the count, you should emit the event (still within the connection listener). The event should be named 'user count', and the data should just be the `currentUsers`. + +```js +io.emit('user count', currentUsers); +``` + +Now, you can implement a way for your client to listen for this event! Similar to listening for a connection on the server, you will use the `on` keyword. + +```js +socket.on('user count', function(data) { + console.log(data); +}); +``` + +Now, try loading up your app, authenticate, and you should see in your client console '1' representing the current user count! Try loading more clients up, and authenticating to see the number go up. + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +currentUsers should be defined. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /currentUsers/gi, + 'You should have variable currentUsers defined' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Server should emit the current user count at each new connection. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /io.emit.*('|")user count('|").*currentUsers/gi, + 'You should emit "user count" with data currentUsers' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Your client should be listening for 'user count' event. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/public/client.js').then( + (data) => { + assert.match( + data, + /socket.on.*('|")user count('|")/gi, + 'Your client should be connection to server with the connection defined as socket' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/create-new-middleware.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/create-new-middleware.md new file mode 100644 index 00000000000..b750b36c42f --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/create-new-middleware.md @@ -0,0 +1,87 @@ +--- +id: 5895f70df9fc0f352b528e6a +title: Create New Middleware +challengeType: 2 +forumTopicId: 301551 +dashedName: create-new-middleware +--- + +# --description-- + +As is, any user can just go to `/profile` whether they have authenticated or not, by typing in the url. We want to prevent this, by checking if the user is authenticated first before rendering the profile page. This is the perfect example of when to create a middleware. + +The challenge here is creating the middleware function `ensureAuthenticated(req, res, next)`, which will check if a user is authenticated by calling passport's `isAuthenticated` method on the `request` which, in turn, checks if `req.user` is defined. If it is, then `next()` should be called, otherwise, we can just respond to the request with a redirect to our homepage to login. An implementation of this middleware is: + +```js +function ensureAuthenticated(req, res, next) { + if (req.isAuthenticated()) { + return next(); + } + res.redirect('/'); +}; +``` + +Now add *ensureAuthenticated* as a middleware to the request for the profile page before the argument to the get request containing the function that renders the page. + +```js +app + .route('/profile') + .get(ensureAuthenticated, (req,res) => { + res.render(process.cwd() + '/views/pug/profile'); + }); +``` + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Middleware ensureAuthenticated should be implemented and on our /profile route. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /ensureAuthenticated[^]*req.isAuthenticated/gi, + 'Your ensureAuthenticated middleware should be defined and utilize the req.isAuthenticated function' + ); + assert.match( + data, + /profile[^]*get[^]*ensureAuthenticated/gi, + 'Your ensureAuthenticated middleware should be attached to the /profile route' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +A Get request to /profile should correctly redirect to / since we are not authenticated. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/profile').then( + (data) => { + assert.match( + data, + /Home page/gi, + 'An attempt to go to the profile at this point should redirect to the homepage since we are not logged in' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md new file mode 100644 index 00000000000..e7781482206 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md @@ -0,0 +1,69 @@ +--- +id: 589fc831f9fc0f352b528e76 +title: Handle a Disconnect +challengeType: 2 +forumTopicId: 301552 +dashedName: handle-a-disconnect +--- + +# --description-- + +You may notice that up to now you have only been increasing the user count. Handling a user disconnecting is just as easy as handling the initial connect, except you have to listen for it on each socket instead of on the whole server. + +To do this, add another listener inside the existing `'connect'` listener that listens for `'disconnect'` on the socket with no data passed through. You can test this functionality by just logging that a user has disconnected to the console. + +```js +socket.on('disconnect', () => { + /*anything you want to do on disconnect*/ +}); +``` + +To make sure clients continuously have the updated count of current users, you should decrease the currentUsers by 1 when the disconnect happens then emit the 'user count' event with the updated count! + +**Note:** Just like `'disconnect'`, all other events that a socket can emit to the server should be handled within the connecting listener where we have 'socket' defined. + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Server should handle the event disconnect from a socket. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match(data, /socket.on.*('|")disconnect('|")/gi, ''); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Your client should be listening for 'user count' event. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/public/client.js').then( + (data) => { + assert.match( + data, + /socket.on.*('|")user count('|")/gi, + 'Your client should be connection to server with the connection defined as socket' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md new file mode 100644 index 00000000000..f897185c9b9 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md @@ -0,0 +1,86 @@ +--- +id: 58a25c98f9fc0f352b528e7f +title: Hashing Your Passwords +challengeType: 2 +forumTopicId: 301553 +dashedName: hashing-your-passwords +--- + +# --description-- + +Going back to the information security section, you may remember that storing plaintext passwords is *never* okay. Now it is time to implement BCrypt to solve this issue. + +`bcrypt@~5.0.0` has already been added as a dependency, so require it in your server. You will need to handle hashing in 2 key areas: where you handle registering/saving a new account, and when you check to see that a password is correct on login. + +Currently on our registration route, you insert a user's password into the database like so: `password: req.body.password`. An easy way to implement saving a hash instead is to add the following before your database logic `const hash = bcrypt.hashSync(req.body.password, 12);`, and replacing the `req.body.password` in the database saving with just `password: hash`. + +Finally, on our authentication strategy, we check for the following in our code before completing the process: `if (password !== user.password) { return done(null, false); }`. After making the previous changes, now `user.password` is a hash. Before making a change to the existing code, notice how the statement is checking if the password is **not** equal then return non-authenticated. With this in mind, your code could look as follows to properly check the password entered against the hash: + +```js +if (!bcrypt.compareSync(password, user.password)) { + return done(null, false); +} +``` + +That is all it takes to implement one of the most important security features when you have to store passwords! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +BCrypt should be a dependency. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'bcrypt', + 'Your project should list "bcrypt" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +BCrypt should be correctly required and implemented. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /require.*("|')bcrypt\1/gi, + 'You should have required bcrypt' + ); + assert.match( + data, + /bcrypt.hashSync/gi, + 'You should use hash the password in the registration' + ); + assert.match( + data, + /bcrypt.compareSync/gi, + 'You should compare the password to the hash in your strategy' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md new file mode 100644 index 00000000000..2c35bb056b1 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md @@ -0,0 +1,57 @@ +--- +id: 5895f70ef9fc0f352b528e6b +title: How to Put a Profile Together +challengeType: 2 +forumTopicId: 301554 +dashedName: how-to-put-a-profile-together +--- + +# --description-- + +Now that we can ensure the user accessing the `/profile` is authenticated, we can use the information contained in `req.user` on our page! + +Pass an object containing the property `username` and value of `req.user.username` as the second argument for the render method of the profile view. Then, go to your `profile.pug` view, and add the following line below the existing `h1` element, and at the same level of indentation: + +```pug +h2.center#welcome Welcome, #{username}! +``` + +This creates an `h2` element with the class '`center`' and id '`welcome`' containing the text '`Welcome,`' followed by the username. + +Also, in `profile.pug`, add a link referring to the `/logout` route, which will host the logic to unauthenticate a user. + +```pug +a(href='/logout') Logout +``` + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +You should correctly add a Pug render variable to /profile. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /username:( |)req.user.username/gi, + 'You should be passing the variable username with req.user.username into the render function of the profile page' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md new file mode 100644 index 00000000000..e656a184424 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md @@ -0,0 +1,79 @@ +--- +id: 5895f70df9fc0f352b528e69 +title: How to Use Passport Strategies +challengeType: 2 +forumTopicId: 301555 +dashedName: how-to-use-passport-strategies +--- + +# --description-- + +In the `index.pug` file supplied, there is actually a login form. It has previously been hidden because of the inline JavaScript `if showLogin` with the form indented after it. Before `showLogin` as a variable was never defined, so it never rendered the code block containing the form. Go ahead and on the `res.render` for that page add a new variable to the object `showLogin: true`. When you refresh your page, you should then see the form! This form is set up to **POST** on `/login`, so this is where we should set up to accept the POST and authenticate the user. + +For this challenge you should add the route `/login` to accept a POST request. To authenticate on this route, you need to add a middleware to do so before then sending a response. This is done by just passing another argument with the middleware before your `function(req,res)` with your response! The middleware to use is `passport.authenticate('local')`. + +`passport.authenticate` can also take some options as an argument such as: `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. The response after using the middleware (which will only be called if the authentication middleware passes) should be to redirect the user to `/profile` and that route should render the view `profile.pug`. + +If the authentication was successful, the user object will be saved in `req.user`. + +At this point, if you enter a username and password in the form, it should redirect to the home page `/`, and the console of your server should display `'User {USERNAME} attempted to log in.'`, since we currently cannot login a user who isn't registered. + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +All steps should be correctly implemented in the server.js. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /showLogin:( |)true/gi, + 'You should be passing the variable "showLogin" as true to your render function for the homepage' + ); + assert.match( + data, + /failureRedirect:( |)('|")\/('|")/gi, + 'Your code should include a failureRedirect to the "/" route' + ); + assert.match( + data, + /login[^]*post[^]*local/gi, + 'You should have a route for login which accepts a POST and passport.authenticates local' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +A POST request to /login should correctly redirect to /. + +```js +(getUserInput) => + $.post(getUserInput('url') + '/login').then( + (data) => { + assert.match( + data, + /Looks like this page is being rendered from Pug into HTML!/gi, + 'A login attempt at this point should redirect to the homepage since we do not have any registered users' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md new file mode 100644 index 00000000000..87e1780eb4c --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md @@ -0,0 +1,91 @@ +--- +id: 5895f70cf9fc0f352b528e67 +title: Implement the Serialization of a Passport User +challengeType: 2 +forumTopicId: 301556 +dashedName: implement-the-serialization-of-a-passport-user +--- + +# --description-- + +Right now, we're not loading an actual user object since we haven't set up our database. This can be done many different ways, but for our project we will connect to the database once when we start the server and keep a persistent connection for the full life-cycle of the app. To do this, add your database's connection string (for example: `mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`) to the environment variable `MONGO_URI`. This is used in the `connection.js` file. + +*If you are having issues setting up a free database on MongoDB Atlas, check out tutorial.* + +Now we want to connect to our database then start listening for requests. The purpose of this is to not allow requests before our database is connected or if there is a database error. To accomplish this, you will want to encompass your serialization and your app routes in the following code: + +```js +myDB(async client => { + const myDataBase = await client.db('database').collection('users'); + + // Be sure to change the title + app.route('/').get((req, res) => { + //Change the response to render the Pug template + res.render('pug', { + title: 'Connected to Database', + message: 'Please login' + }); + }); + + // Serialization and deserialization here... + + // Be sure to add this... +}).catch(e => { + app.route('/').get((req, res) => { + res.render('pug', { title: e, message: 'Unable to login' }); + }); +}); +// app.listen out here... +``` + +Be sure to uncomment the `myDataBase` code in `deserializeUser`, and edit your `done(null, null)` to include the `doc`. + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Database connection should be present. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/').then( + (data) => { + assert.match( + data, + /Connected to Database/gi, + 'You successfully connected to the database!' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Deserialization should now be correctly using the DB and `done(null, null)` should be called with the `doc`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /null,\s*doc/gi, + 'The callback in deserializeUser of (null, null) should be altered to (null, doc)' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md new file mode 100644 index 00000000000..f4552257d4b --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -0,0 +1,116 @@ +--- +id: 589a69f5f9fc0f352b528e71 +title: Implementation of Social Authentication II +challengeType: 2 +forumTopicId: 301557 +dashedName: implementation-of-social-authentication-ii +--- + +# --description-- + +The last part of setting up your GitHub authentication is to create the strategy itself. `passport-github@~1.1.0` has already been added as a dependency, so require it in your `auth.js` file as `GithubStrategy` like this: `const GitHubStrategy = require('passport-github').Strategy;`. Do not forget to require and configure `dotenv` to use your environment variables. + +To set up the GitHub strategy, you have to tell Passport to use an instantiated `GitHubStrategy`, which accepts 2 arguments: an object (containing `clientID`, `clientSecret`, and `callbackURL`) and a function to be called when a user is successfully authenticated, which will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies, but some may require more information as outlined in that specific strategy's GitHub README. For example, Google requires a *scope* as well which determines what kind of information your request is asking to be returned and asks the user to approve such access. + +The current strategy we are implementing authenticates users using a GitHub account and OAuth 2.0 tokens. The client ID and secret obtained when creating an application are supplied as options when creating the strategy. The strategy also requires a `verify` callback, which receives the access token and optional refresh token, as well as `profile` which contains the authenticated user's GitHub profile. The `verify` callback must call `cb` providing a user to complete authentication. + +Here's how your new strategy should look at this point: + +```js +passport.use(new GitHubStrategy({ + clientID: process.env.GITHUB_CLIENT_ID, + clientSecret: process.env.GITHUB_CLIENT_SECRET, + callbackURL: /*INSERT CALLBACK URL ENTERED INTO GITHUB HERE*/ +}, + function(accessToken, refreshToken, profile, cb) { + console.log(profile); + //Database logic here with callback containing our user object + } +)); +``` + +Your authentication won't be successful yet, and it will actually throw an error without the database logic and callback, but it should log your GitHub profile to your console if you try it! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +passport-github dependency should be added. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'passport-github', + 'Your project should list "passport-github" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +passport-github should be required. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/auth.js').then( + (data) => { + assert.match( + data, + /require.*("|')passport-github("|')/gi, + 'You should have required passport-github' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +GitHub strategy should be setup correctly thus far. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/auth.js').then( + (data) => { + assert.match( + data, + /passport\.use.*new GitHubStrategy/gis, + 'Passport should use a new GitHubStrategy' + ); + assert.match( + data, + /callbackURL:\s*("|').*("|')/gi, + 'You should have a callbackURL' + ); + assert.match( + data, + /process\.env(\.GITHUB_CLIENT_SECRET|\[(?"|')GITHUB_CLIENT_SECRET\k\])/g, + 'You should use process.env.GITHUB_CLIENT_SECRET' + ); + assert.match( + data, + /process\.env(\.GITHUB_CLIENT_ID|\[(?"|')GITHUB_CLIENT_ID\k\])/g, + 'You should use process.env.GITHUB_CLIENT_ID' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md new file mode 100644 index 00000000000..87feb7dfca3 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md @@ -0,0 +1,80 @@ +--- +id: 589a8eb3f9fc0f352b528e72 +title: Implementation of Social Authentication III +challengeType: 2 +forumTopicId: 301558 +dashedName: implementation-of-social-authentication-iii +--- + +# --description-- + +The final part of the strategy is handling the profile returned from GitHub. We need to load the user's database object if it exists, or create one if it doesn't, and populate the fields from the profile, then return the user's object. GitHub supplies us a unique *id* within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project--it goes within the function that is the second argument for the new strategy, right below where `console.log(profile);` currently is: + +```js +myDataBase.findOneAndUpdate( + { id: profile.id }, + { + $setOnInsert: { + id: profile.id, + name: profile.displayName || 'John Doe', + photo: profile.photos[0].value || '', + email: Array.isArray(profile.emails) + ? profile.emails[0].value + : 'No public email', + created_on: new Date(), + provider: profile.provider || '' + }, + $set: { + last_login: new Date() + }, + $inc: { + login_count: 1 + } + }, + { upsert: true, new: true }, + (err, doc) => { + return cb(null, doc.value); + } +); +``` + +`findOneAndUpdate` allows you to search for an object and update it. If the object doesn't exist, it will be inserted and made available to the callback function. In this example, we always set `last_login`, increment the `login_count` by `1`, and only populate the majority of the fields when a new object (new user) is inserted. Notice the use of default values. Sometimes a profile returned won't have all the information filled out or the user will keep it private. In this case, you handle it to prevent an error. + +You should be able to login to your app now--try it! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +GitHub strategy setup should be complete. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/auth.js').then( + (data) => { + assert.match( + data, + /GitHubStrategy[^]*myDataBase/gi, + 'Strategy should use now use the database to search for the user' + ); + assert.match( + data, + /GitHubStrategy[^]*return cb/gi, + 'Strategy should return the callback function "cb"' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md new file mode 100644 index 00000000000..a744f418598 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md @@ -0,0 +1,108 @@ +--- +id: 589a69f5f9fc0f352b528e70 +title: Implementation of Social Authentication +challengeType: 2 +forumTopicId: 301559 +dashedName: implementation-of-social-authentication +--- + +# --description-- + +The basic path this kind of authentication will follow in your app is: + +1. User clicks a button or link sending them to our route to authenticate using a specific strategy (e.g. GitHub). +2. Your route calls `passport.authenticate('github')` which redirects them to GitHub. +3. The page the user lands on, on GitHub, allows them to login if they aren't already. It then asks them to approve access to their profile from our app. +4. The user is then returned to our app at a specific callback url with their profile if they are approved. +5. They are now authenticated, and your app should check if it is a returning profile, or save it in your database if it is not. + +Strategies with OAuth require you to have at least a *Client ID* and a *Client Secret* which is a way for the service to verify who the authentication request is coming from and if it is valid. These are obtained from the site you are trying to implement authentication with, such as GitHub, and are unique to your app--**THEY ARE NOT TO BE SHARED** and should never be uploaded to a public repository or written directly in your code. A common practice is to put them in your `.env` file and reference them like so: `process.env.GITHUB_CLIENT_ID`. For this challenge we're going to use the GitHub strategy. + +Obtaining your *Client ID and Secret* from GitHub is done in your account profile settings under 'developer settings', then 'OAuth applications'. Click 'Register a new application', name your app, paste in the url to your Replit homepage (**Not the project code's url**), and lastly, for the callback url, paste in the same url as the homepage but with `/auth/github/callback` added on. This is where users will be redirected for us to handle after authenticating on GitHub. Save the returned information as `'GITHUB_CLIENT_ID'` and `'GITHUB_CLIENT_SECRET'` in your `.env` file. + +In your `routes.js` file, add `showSocialAuth: true` to the homepage route, after `showRegistration: true`. Now, create 2 routes accepting GET requests: `/auth/github` and `/auth/github/callback`. The first should only call passport to authenticate `'github'`. The second should call passport to authenticate `'github'` with a failure redirect to `/`, and then if that is successful redirect to `/profile` (similar to our last project). + +An example of how `/auth/github/callback` should look is similar to how we handled a normal login: + +```js +app.route('/login') + .post(passport.authenticate('local', { failureRedirect: '/' }), (req,res) => { + res.redirect('/profile'); + }); +``` + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point https://gist.github.com/camperbot/1f7f6f76adb178680246989612bea21e. + +# --hints-- + +Route `/auth/github` should be correct. + +```js +async (getUserInput) => { + try { + const res = await fetch(getUserInput('url') + '/_api/routes.js'); + if (res.ok) { + const data = await res.text(); + assert.match( + data.replace(/\s/g, ''), + /passport.authenticate.*?github/g, + 'Route auth/github should only call passport.authenticate with github' + ); + } else { + throw new Error(res.statusText); + } + const res2 = await fetch(getUserInput('url') + '/_api/app-stack'); + if (res2.ok) { + const data2 = JSON.parse(await res2.json()); + const dataLayer = data2.find(layer => layer?.route?.path === '/auth/github'); + assert.deepInclude(dataLayer?.route, { methods: {get: true}, path: "/auth/github"}); + assert.deepInclude(dataLayer?.route?.stack?.[0], {method: "get", name: "authenticate"}); + } else { + throw new Error(res2.statusText); + } + } catch (err) { + throw new Error(err); + } +} +``` + +Route `/auth/github/callback` should be correct. + +```js +async (getUserInput) => { + try { + const res = await fetch(getUserInput('url') + '/_api/routes.js'); + if (res.ok) { + const data = await res.text(); + assert.match( + data.replace(/\s/g, ''), + /failureRedirect:("|')\/\1/g, + 'Route auth/github/callback should accept a get request and call passport.authenticate for github with a failure redirect to home' + ); + } else { + throw new Error(res.statusText); + } + const res2 = await fetch(getUserInput('url') + '/_api/app-stack'); + if (res2.ok) { + const data2 = JSON.parse(await res2.json()); + const dataLayer = data2.find(layer => layer?.route?.path === '/auth/github/callback'); + assert.deepInclude(dataLayer?.route, { methods: {get: true}, path: "/auth/github/callback"}); + assert.deepInclude(dataLayer?.route?.stack?.[0], {method: "get", name: "authenticate"}); + } else { + throw new Error(res2.statusText); + } + } catch (err) { + throw new Error(err); + } +} +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md new file mode 100644 index 00000000000..69686500bf0 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md @@ -0,0 +1,81 @@ +--- +id: 58965611f9fc0f352b528e6c +title: Logging a User Out +challengeType: 2 +forumTopicId: 301560 +dashedName: logging-a-user-out +--- + +# --description-- + +Creating the logout logic is easy. The route should just unauthenticate the user and redirect to the home page instead of rendering any view. + +In passport, unauthenticating a user is as easy as just calling `req.logout();` before redirecting. + +```js +app.route('/logout') + .get((req, res) => { + req.logout(); + res.redirect('/'); +}); +``` + +You may have noticed that we're not handling missing pages (404). The common way to handle this in Node is with the following middleware. Go ahead and add this in after all your other routes: + +```js +app.use((req, res, next) => { + res.status(404) + .type('text') + .send('Not Found'); +}); +``` + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +`req.logout()` should be called in your `/logout` route. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /req.logout/gi, + 'You should be calling req.logout() in your /logout route' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Logout should redirect to the home page. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/logout').then( + (data) => { + assert.match( + data, + /Home page/gi, + 'When a user logs out they should be redirected to the homepage' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md new file mode 100644 index 00000000000..2b64f9d1b5d --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md @@ -0,0 +1,205 @@ +--- +id: 58966a17f9fc0f352b528e6d +title: Registration of New Users +challengeType: 2 +forumTopicId: 301561 +dashedName: registration-of-new-users +--- + +# --description-- + +Now we need to allow a new user on our site to register an account. On the `res.render` for the home page add a new variable to the object passed along--`showRegistration: true`. When you refresh your page, you should then see the registration form that was already created in your `index.pug` file! This form is set up to **POST** on `/register`, so this is where we should set up to accept the **POST** and create the user object in the database. + +The logic of the registration route should be as follows: Register the new user > Authenticate the new user > Redirect to /profile + +The logic of step 1, registering the new user, should be as follows: Query database with a findOne command > if user is returned then it exists and redirect back to home *OR* if user is undefined and no error occurs then 'insertOne' into the database with the username and password, and, as long as no errors occur, call *next* to go to step 2, authenticating the new user, which we've already written the logic for in our POST */login* route. + +```js +app.route('/register') + .post((req, res, next) => { + myDataBase.findOne({ username: req.body.username }, function(err, user) { + if (err) { + next(err); + } else if (user) { + res.redirect('/'); + } else { + myDataBase.insertOne({ + username: req.body.username, + password: req.body.password + }, + (err, doc) => { + if (err) { + res.redirect('/'); + } else { + // The inserted document is held within + // the ops property of the doc + next(null, doc.ops[0]); + } + } + ) + } + }) + }, + passport.authenticate('local', { failureRedirect: '/' }), + (req, res, next) => { + res.redirect('/profile'); + } + ); +``` + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +**NOTE:** From this point onwards, issues can arise relating to the use of the *picture-in-picture* browser. If you are using an online IDE which offers a preview of the app within the editor, it is recommended to open this preview in a new tab. + +# --hints-- + +You should register route and display on home. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /showRegistration:( |)true/gi, + 'You should be passing the variable showRegistration as true to your render function for the homepage' + ); + assert.match( + data, + /register[^]*post[^]*findOne[^]*username:( |)req.body.username/gi, + 'You should have a route accepted a post request on register that querys the db with findone and the query being username: req.body.username' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Registering should work. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const user = `freeCodeCampTester${Date.now()}`; + const xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + test(this); + } else { + throw new Error(`${this.status} ${this.statusText}`); + } + }; + xhttp.open('POST', url + '/register', true); + xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhttp.send(`username=${user}&password=${user}`); + function test(xhttpRes) { + const data = xhttpRes.responseText; + assert.match( + data, + /Profile/gi, + 'Register should work, and redirect successfully to the profile.' + ); + } +}; +``` + +Login should work. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const user = `freeCodeCampTester${Date.now()}`; + const xhttpReg = new XMLHttpRequest(); + xhttpReg.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + login(); + } else { + throw new Error(`${this.status} ${this.statusText}`); + } + }; + xhttpReg.open('POST', url + '/register', true); + xhttpReg.setRequestHeader( + 'Content-type', + 'application/x-www-form-urlencoded' + ); + xhttpReg.send(`username=${user}&password=${user}`); + function login() { + const xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + test(this); + } else { + throw new Error(`${this.status} ${this.statusText}`); + } + }; + xhttp.open('POST', url + '/login', true); + xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhttp.send(`username=${user}&password=${user}`); + } + function test(xhttpRes) { + const data = xhttpRes.responseText; + assert.match( + data, + /Profile/gi, + 'Login should work if previous test was done successfully and redirect successfully to the profile.' + ); + assert.match( + data, + new RegExp(user, 'g'), + 'The profile should properly display the welcome to the user logged in' + ); + } +}; +``` + +Logout should work. + +```js +(getUserInput) => + $.ajax({ + url: getUserInput('url') + '/logout', + type: 'GET', + xhrFields: { withCredentials: true } + }).then( + (data) => { + assert.match(data, /Home/gi, 'Logout should redirect to home'); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Profile should no longer work after logout. + +```js +(getUserInput) => + $.ajax({ + url: getUserInput('url') + '/profile', + type: 'GET', + crossDomain: true, + xhrFields: { withCredentials: true } + }).then( + (data) => { + assert.match( + data, + /Home/gi, + 'Profile should redirect to home when we are logged out now again' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md new file mode 100644 index 00000000000..ab19e7387f2 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md @@ -0,0 +1,79 @@ +--- +id: 589fc832f9fc0f352b528e79 +title: Send and Display Chat Messages +challengeType: 2 +forumTopicId: 301562 +dashedName: send-and-display-chat-messages +--- + +# --description-- + +It's time you start allowing clients to send a chat message to the server to emit to all the clients! In your `client.js` file, you should see there is already a block of code handling when the message form is submitted. + +```js +$('form').submit(function() { + /*logic*/ +}); +``` + +Within the form submit code, you should emit an event after you define `messageToSend` but before you clear the text box `#m`. The event should be named `'chat message'` and the data should just be `messageToSend`. + +```js +socket.emit('chat message', messageToSend); +``` + +Now, on your server, you should be listening to the socket for the event `'chat message'` with the data being named `message`. Once the event is received, it should emit the event `'chat message'` to all sockets `io.emit` with the data being an object containing `name` and `message`. + +In `client.js`, you should now listen for event `'chat message'` and, when received, append a list item to `#messages` with the name, a colon, and the message! + +At this point, the chat should be fully functional and sending messages across all clients! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Server should listen for `'chat message'` and then emit it properly. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /socket.on.*('|")chat message('|")[^]*io.emit.*('|")chat message('|").*name.*message/gis, + 'Your server should listen to the socket for "chat message" then emit to all users "chat message" with name and message in the data object' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Client should properly handle and display the new data from event `'chat message'`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/public/client.js').then( + (data) => { + assert.match( + data, + /socket.on.*('|")chat message('|")[^]*messages.*li/gis, + 'You should append a list item to #messages on your client within the "chat message" event listener to display the new message' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md new file mode 100644 index 00000000000..eb99213c0b8 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md @@ -0,0 +1,131 @@ +--- +id: 5895f70cf9fc0f352b528e66 +title: Serialization of a User Object +challengeType: 2 +forumTopicId: 301563 +dashedName: serialization-of-a-user-object +--- + +# --description-- + +Serialization and deserialization are important concepts in regards to authentication. To serialize an object means to convert its contents into a small *key* that can then be deserialized into the original object. This is what allows us to know who has communicated with the server without having to send the authentication data, like the username and password, at each request for a new page. + +To set this up properly, we need to have a serialize function and a deserialize function. In Passport, we create these with `passport.serializeUser( OURFUNCTION )` and `passport.deserializeUser( OURFUNCTION )` + +The `serializeUser` is called with 2 arguments, the full user object and a callback used by passport. A unique key to identify that user should be returned in the callback, the easiest one to use being the user's `_id` in the object. It should be unique as it is generated by MongoDB. Similarly, `deserializeUser` is called with that key and a callback function for passport as well, but, this time, we have to take that key and return the full user object to the callback. To make a query search for a Mongo `_id`, you will have to create `const ObjectID = require('mongodb').ObjectID;`, and then to use it you call `new ObjectID(THE_ID)`. `mongodb@~3.6.0` has already been added as a dependency. You can see this in the examples below: + +```js +passport.serializeUser((user, done) => { + done(null, user._id); +}); + +passport.deserializeUser((id, done) => { + myDataBase.findOne({ _id: new ObjectID(id) }, (err, doc) => { + done(null, null); + }); +}); +``` + +NOTE: This `deserializeUser` will throw an error until we set up the DB in the next step, so for now comment out the whole block and just call `done(null, null)` in the function `deserializeUser`. + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +You should serialize user function correctly. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /passport.serializeUser/gi, + 'You should have created your passport.serializeUser function' + ); + assert.match( + data, + /null,\s*user._id/gi, + 'There should be a callback in your serializeUser with (null, user._id)' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +You should deserialize user function correctly. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /passport.deserializeUser/gi, + 'You should have created your passport.deserializeUser function' + ); + assert.match( + data, + /null,\s*null/gi, + 'There should be a callback in your deserializeUser with (null, null) for now' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +MongoDB should be a dependency. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'mongodb', + 'Your project should list "mongodb" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Mongodb should be properly required including the ObjectId. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /require.*("|')mongodb\1/gi, + 'You should have required mongodb' + ); + assert.match( + data, + /new ObjectID.*id/gi, + 'Even though the block is commented out, you should use new ObjectID(id) for when we add the database' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md new file mode 100644 index 00000000000..08d21a01237 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md @@ -0,0 +1,116 @@ +--- +id: 5895f700f9fc0f352b528e63 +title: Set up a Template Engine +challengeType: 2 +forumTopicId: 301564 +dashedName: set-up-a-template-engine +--- + +# --description-- + +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete these challenges locally. +- Use our Replit starter project to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + +A template engine enables you to use static template files (such as those written in *Pug*) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client. + +`pug@~3.0.0` has already been installed, and is listed as a dependency in your `package.json` file. + +Express needs to know which template engine you are using. We will use the `set` method to assign `pug` as the `view engine` property's value: `app.set('view engine', 'pug')` + +Your page will be blank until you correctly render the index file in the `views/pug` directory. + +To render the `pug` template, you need to use `res.render()` in the `/` route. Pass the file path to the `views/pug` directory as the argument to the method. The path can be a relative path (relative to views), or an absolute path, and does not require a file extension. + +If all went as planned, your app home page will no longer be blank and will display a message indicating you've successfully rendered the Pug template! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Pug should be a dependency. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'pug', + 'Your project should list "pug" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +View engine should be Pug. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /('|")view engine('|"),( |)('|")pug('|")/gi, + 'Your project should set Pug as a view engine' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Use the correct ExpressJS method to render the index page from the response. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/').then( + (data) => { + assert.match( + data, + /FCC Advanced Node and Express/gi, + 'You successfully rendered the Pug template!' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Pug should be working. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/').then( + (data) => { + assert.match( + data, + /pug-success-message/gi, + 'Your projects home page should now be rendered by pug with the projects .pug file unaltered' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-passport.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-passport.md new file mode 100644 index 00000000000..52d64d22cdc --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-passport.md @@ -0,0 +1,130 @@ +--- +id: 5895f70cf9fc0f352b528e65 +title: Set up Passport +challengeType: 2 +forumTopicId: 301565 +dashedName: set-up-passport +--- + +# --description-- + +It's time to set up *Passport* so we can finally start allowing a user to register or login to an account! In addition to Passport, we will use Express-session to handle sessions. Express-session has a ton of advanced features you can use, but for now we're just going to use the basics! Using this middleware saves the session id as a cookie in the client and allows us to access the session data using that id on the server. This way we keep personal account information out of the cookie used by the client to verify to our server they are authenticated and just keep the *key* to access the data stored on the server. + +`passport@~0.4.1` and `express-session@~1.17.1` are already installed, and are both listed as dependencies in your `package.json` file. + +You will need to set up the session settings now and initialize Passport. Be sure to first create the variables 'session' and 'passport' to require 'express-session' and 'passport' respectively. + +To set up your express app to use the session we'll define just a few basic options. Be sure to add 'SESSION_SECRET' to your .env file and give it a random value. This is used to compute the hash used to encrypt your cookie! + +```js +app.use(session({ + secret: process.env.SESSION_SECRET, + resave: true, + saveUninitialized: true, + cookie: { secure: false } +})); +``` + +As well you can go ahead and tell your express app to **use** 'passport.initialize()' and 'passport.session()'. (For example, `app.use(passport.initialize());`) + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Passport and Express-session should be dependencies. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'passport', + 'Your project should list "passport" as a dependency' + ); + assert.property( + packJson.dependencies, + 'express-session', + 'Your project should list "express-session" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Dependencies should be correctly required. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /require.*("|')passport("|')/gi, + 'You should have required passport' + ); + assert.match( + data, + /require.*("|')express-session("|')/gi, + 'You should have required express-session' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Express app should use new dependencies. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /passport.initialize/gi, + 'Your express app should use "passport.initialize()"' + ); + assert.match( + data, + /passport.session/gi, + 'Your express app should use "passport.session()"' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Session and session secret should be correctly set up. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /secret *: *process\.env(\.SESSION_SECRET|\[(?"|')SESSION_SECRET\k\])/g, + 'Your express app should have express-session set up with your secret as process.env.SESSION_SECRET' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md new file mode 100644 index 00000000000..853b0779305 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md @@ -0,0 +1,148 @@ +--- +id: 589fc830f9fc0f352b528e74 +title: Set up the Environment +challengeType: 2 +forumTopicId: 301566 +dashedName: set-up-the-environment +--- + +# --description-- + +The following challenges will make use of the `chat.pug` file. So, in your `routes.js` file, add a GET route pointing to `/chat` which makes use of `ensureAuthenticated`, and renders `chat.pug`, with `{ user: req.user }` passed as an argument to the response. Now, alter your existing `/auth/github/callback` route to set the `req.session.user_id = req.user.id`, and redirect to `/chat`. + +`socket.io@~2.3.0` has already been added as a dependency, so require/instantiate it in your server as follows with `http` (comes built-in with Nodejs): + +```javascript +const http = require('http').createServer(app); +const io = require('socket.io')(http); +``` + +Now that the *http* server is mounted on the *express app*, you need to listen from the *http* server. Change the line with `app.listen` to `http.listen`. + +The first thing needing to be handled is listening for a new connection from the client. The on keyword does just that- listen for a specific event. It requires 2 arguments: a string containing the title of the event that's emitted, and a function with which the data is passed through. In the case of our connection listener, we use *socket* to define the data in the second argument. A socket is an individual client who is connected. + +To listen for connections to your server, add the following within your database connection: + +```javascript +io.on('connection', socket => { + console.log('A user has connected'); +}); +``` + +Now for the client to connect, you just need to add the following to your `client.js` which is loaded by the page after you've authenticated: + +```js +/*global io*/ +let socket = io(); +``` + +The comment suppresses the error you would normally see since 'io' is not defined in the file. We've already added a reliable CDN to the Socket.IO library on the page in chat.pug. + +Now try loading up your app and authenticate and you should see in your server console 'A user has connected'! + +**Note:**`io()` works only when connecting to a socket hosted on the same url/server. For connecting to an external socket hosted elsewhere, you would use `io.connect('URL');`. + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +`socket.io` should be a dependency. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + var packJson = JSON.parse(data); + assert.property( + packJson.dependencies, + 'socket.io', + 'Your project should list "socket.io" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +You should correctly require and instantiate `http` as `http`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /http.*=.*require.*('|")http\1/gi, + 'Your project should list "http" as a dependency' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +You should correctly require and instantiate `socket.io` as `io`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /io.*=.*require.*('|")socket.io\1.*http/gi, + 'You should correctly require and instantiate socket.io as io.' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Socket.IO should be listening for connections. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /io.on.*('|")connection\1.*socket/gi, + 'io should listen for "connection" and socket should be the 2nd arguments variable' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +Your client should connect to your server. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/public/client.js').then( + (data) => { + assert.match( + data, + /socket.*=.*io/gi, + 'Your client should be connection to server with the connection defined as socket' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md new file mode 100644 index 00000000000..f956f5ea5ec --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md @@ -0,0 +1,77 @@ +--- +id: 5895f70bf9fc0f352b528e64 +title: Use a Template Engine's Powers +challengeType: 2 +forumTopicId: 301567 +dashedName: use-a-template-engines-powers +--- + +# --description-- + +One of the greatest features of using a template engine is being able to pass variables from the server to the template file before rendering it to HTML. + +In your Pug file, you're able to use a variable by referencing the variable name as `#{variable_name}` inline with other text on an element or by using an equal sign on the element without a space such as `p=variable_name` which assigns the variable's value to the p element's text. + + Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site. Read the Pug documentation for more information on usage and syntax. + + Here is an example: + + ```html + + head + script(type='text/javascript'). + if (foo) bar(1 + 5); + body + if youAreUsingPug + p You are amazing + else + p Get on it! + + + + + + +

You are amazing

+ + ``` + +Looking at our pug file `index.pug` included in your project, we used the variables `title` and `message`. + +To pass those along from our server, you will need to add an object as a second argument to your `res.render` with the variables and their values. For example, pass this object along setting the variables for your index view: `{title: 'Hello', message: 'Please login'}` + +It should look like: `res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'});` Now refresh your page and you should see those values rendered in your view in the correct spot as laid out in your `index.pug` file! + +Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. + +# --hints-- + +Pug should correctly render variables. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/').then( + (data) => { + assert.match( + data, + /pug-variable("|')>Please login/gi, + 'Your projects home page should now be rendered by pug with the projects .pug file unaltered' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md new file mode 100644 index 00000000000..dce3842b690 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md @@ -0,0 +1,79 @@ +--- +id: 587d824c367417b2b2512c4c +title: Assert Deep Equality with .deepEqual and .notDeepEqual +challengeType: 2 +forumTopicId: 301587 +dashedName: assert-deep-equality-with--deepequal-and--notdeepequal +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit or cloned from GitHub. + +`deepEqual()` asserts that two objects are deep equal. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#7` in the `Equality` suite, change each `assert` to either `assert.deepEqual` or `assert.notDeepEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `deepEqual` vs. `notDeepEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'deepEqual', + 'The order of the keys does not matter' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `deepEqual` vs. `notDeepEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'notDeepEqual', + 'The position of elements within an array does matter' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md new file mode 100644 index 00000000000..9f141e9c038 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md @@ -0,0 +1,109 @@ +--- +id: 587d824c367417b2b2512c4d +title: Compare the Properties of Two Elements +challengeType: 2 +forumTopicId: 301588 +dashedName: compare-the-properties-of-two-elements +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#8` in the `Comparisons` suite, change each `assert` to either `assert.isAbove` or `assert.isAtMost` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isAbove` vs. `isAtMost`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'isAtMost', + '5 is at most (<=) 5' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isAbove` vs. `isAtMost`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then( + (data) => { + assert.equal(data.assertions[1].method, 'isAbove', '1 is greater than 0'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `isAbove` vs. `isAtMost`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then( + (data) => { + assert.equal( + data.assertions[2].method, + 'isAbove', + 'Math.PI = 3.14159265 is greater than 3' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the fourth assertion - `isAbove` vs. `isAtMost`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then( + (data) => { + assert.equal( + data.assertions[3].method, + 'isAtMost', + '1 - Math.random() is > 0 and <= 1. It is atMost 1 !' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md new file mode 100644 index 00000000000..cd9a19586d2 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -0,0 +1,75 @@ +--- +id: 587d824a367417b2b2512c46 +title: Learn How JavaScript Assertions Work +challengeType: 2 +forumTopicId: 301589 +dashedName: learn-how-javascript-assertions-work +--- + +# --description-- + +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete these challenges locally. +- Use our Replit starter project to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#1` in the `Basic Assertions` suite, change each `assert` to either `assert.isNull` or `assert.isNotNull` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isNull` vs. `isNotNull`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then( + (data) => { + assert.equal(data.assertions[0].method, 'isNull', 'Null is null'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isNull` vs. `isNotNull`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then( + (data) => { + assert.equal(data.assertions[1].method, 'isNotNull', '1 is not null'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md new file mode 100644 index 00000000000..5b62f40dfa4 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md @@ -0,0 +1,126 @@ +--- +id: 587d824f367417b2b2512c5b +title: Run Functional Tests on an API Response using Chai-HTTP IV - PUT method +challengeType: 2 +forumTopicId: 301591 +dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-method +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +This exercise is similar to the previous one. + +Now that you know how to test a `PUT` request, it's your turn to do it from scratch. + +# --instructions-- + +Within `tests/2_functional-tests.js`, alter the `'Send {surname: "da Verrazzano"}'` test (`// #4`) and use the `put` and `send` methods to test the `'/travellers'` endpoint. + +Send the following JSON object with your PUT request: + +```json +{ + "surname": "da Verrazzano" +} +``` + +Check for the following within the `request.end` callback: + +1. The `status` should be `200` +2. The `type` should be `application/json` +3. The `body.name` should be `Giovanni` +4. The `body.surname` should be `da Verrazzano` + +Follow the assertion order above - we rely on it. Also, be sure to remove `assert.fail()` once complete. + +# --hints-- + +All tests should pass + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should test for `res.status` to be 200 + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then( + (data) => { + assert.equal(data.assertions[0].method, 'equal'); + assert.equal(data.assertions[0].args[0], 'res.status'); + assert.equal(data.assertions[0].args[1], '200'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should test for `res.type` to be `'application/json'` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then( + (data) => { + assert.equal(data.assertions[1].method, 'equal'); + assert.equal(data.assertions[1].args[0], 'res.type'); + assert.match(data.assertions[1].args[1], /('|")application\/json\1/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should test for `res.body.name` to be `'Giovanni'` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then( + (data) => { + assert.equal(data.assertions[2].method, 'equal'); + assert.equal(data.assertions[2].args[0], 'res.body.name'); + assert.match(data.assertions[2].args[1], /('|")Giovanni\1/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should test for `res.body.surname` to be `'da Verrazzano'` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then( + (data) => { + assert.equal(data.assertions[3].method, 'equal'); + assert.equal(data.assertions[3].args[0], 'res.body.surname'); + assert.match(data.assertions[3].args[1], /('|")da Verrazzano\1/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md new file mode 100644 index 00000000000..d5ef5fa8260 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md @@ -0,0 +1,75 @@ +--- +id: 587d824f367417b2b2512c59 +title: Run Functional Tests on API Endpoints using Chai-HTTP II +challengeType: 2 +forumTopicId: 301592 +dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +# --instructions-- + +Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with your name'` test (`// #2`) to assert the `status` and the `text` of the response to make the test pass. + +Send your name as a URL query by appending `?name=` to the route. The endpoint responds with `'hello '`. + +# --hints-- + +All tests should pass + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should test for `res.status` == 200 + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then( + (data) => { + assert.equal(data.assertions[0].method, 'equal'); + assert.equal(data.assertions[0].args[0], 'res.status'); + assert.equal(data.assertions[0].args[1], '200'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should test for `res.text` == `'hello '` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then( + (data) => { + assert.equal(data.assertions[1].method, 'equal'); + assert.equal(data.assertions[1].args[0], 'res.text'); + assert.match(data.assertions[1].args[1], /hello [\w\d_-]/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md new file mode 100644 index 00000000000..548cb3c5258 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md @@ -0,0 +1,115 @@ +--- +id: 5f8884f4c46685731aabfc41 +title: Run Functional Tests Using a Headless Browser II +challengeType: 2 +forumTopicId: 301594 +dashedName: run-functional-tests-using-a-headless-browser-ii +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +# --instructions-- + +Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in the HTML form'` test (`// #6`), automate the following: + +1. Fill in the form with the surname `Vespucci` +2. Press the submit button + +And within the `pressButton` callback: + +1. Assert that status is OK `200` +2. Assert that the text inside the element `span#name` is `'Amerigo'` +3. Assert that the text inside the element `span#surname` is `'Vespucci'` +4. Assert that the element(s) `span#dates` exist and their count is `1` + +Do not forget to remove the `assert.fail()` call. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the headless browser request succeeded. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then( + (data) => { + assert.equal(data.assertions[0].method, 'browser.success'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the text inside the element `span#name` is `'Amerigo'`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then( + (data) => { + assert.equal(data.assertions[1].method, 'browser.text'); + assert.match(data.assertions[1].args[0], /('|")span#name\1/); + assert.match(data.assertions[1].args[1], /('|")Amerigo\1/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the text inside the element `span#surname` is `'Vespucci'`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then( + (data) => { + assert.equal(data.assertions[2].method, 'browser.text'); + assert.match(data.assertions[2].args[0], /('|")span#surname\1/); + assert.match(data.assertions[2].args[1], /('|")Vespucci\1/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the element `span#dates` exist and its count is 1. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then( + (data) => { + assert.equal(data.assertions[3].method, 'browser.elements'); + assert.match(data.assertions[3].args[0], /('|")span#dates\1/); + assert.equal(data.assertions[3].args[1], 1); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md new file mode 100644 index 00000000000..64ace9d1e36 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md @@ -0,0 +1,148 @@ +--- +id: 587d8250367417b2b2512c5d +title: Run Functional Tests Using a Headless Browser +challengeType: 2 +forumTopicId: 301595 +dashedName: run-functional-tests-using-a-headless-browser +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +On the page there's an input form. It sends data to the `PUT /travellers` endpoint as an AJAX request. + +When the request successfully completes, the client code appends a `
` containing the information in the response to the DOM. + +Here's an example of how to use Zombie.js to interact with the form: + +```js +test('Submit the surname "Polo" in the HTML form', function (done) { + browser.fill('surname', 'Polo').then(() => { + browser.pressButton('submit', () => { + browser.assert.success(); + browser.assert.text('span#name', 'Marco'); + browser.assert.text('span#surname', 'Polo'); + browser.assert.elements('span#dates', 1); + done(); + }); + }); +}); +``` + +First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. `fill` returns a promise, so `then` is chained off of it. + +Within the `then` callback, the `pressButton` method of the `browser` object is used to invoke the form's `submit` event listener. The `pressButton` method is asynchronous. + +Then, once a response is received from the AJAX request, a few assertions are made confirming: + +1. The status of the response is `200` +2. The text within the `` element matches `'Marco'` +3. The text within the `` element matches `'Polo'` +4. There is `1` `` element. + +Finally, the `done` callback is invoked, which is needed due to the asynchronous test. + +# --instructions-- + +Within `tests/2_functional-tests.js`, in the `'Submit the surname "Colombo" in the HTML form'` test (`// #5`), automate the following: + +1. Fill in the form with the surname `Colombo` +2. Press the submit button + +And within the `pressButton` callback: + +1. Assert that status is OK `200` +2. Assert that the text inside the element `span#name` is `'Cristoforo'` +3. Assert that the text inside the element `span#surname` is `'Colombo'` +4. Assert that the element(s) `span#dates` exist and their count is `1` + +Do not forget to remove the `assert.fail()` call. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the headless browser request succeeded. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then( + (data) => { + assert.equal(data.assertions[0].method, 'browser.success'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the text inside the element `span#name` is `'Cristoforo'`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then( + (data) => { + assert.equal(data.assertions[1].method, 'browser.text'); + assert.match(data.assertions[1].args[0], /('|")span#name\1/); + assert.match(data.assertions[1].args[1], /('|")Cristoforo\1/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the text inside the element `span#surname` is `'Colombo'`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then( + (data) => { + assert.equal(data.assertions[2].method, 'browser.text'); + assert.match(data.assertions[2].args[0], /('|")span#surname\1/); + assert.match(data.assertions[2].args[1], /('|")Colombo\1/); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should assert that the element `span#dates` exist and its count is 1. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then( + (data) => { + assert.equal(data.assertions[3].method, 'browser.elements'); + assert.match(data.assertions[3].args[0], /('|")span#dates\1/); + assert.equal(data.assertions[3].args[1], 1); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md new file mode 100644 index 00000000000..6257a4c6f20 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md @@ -0,0 +1,72 @@ +--- +id: 587d824f367417b2b2512c5c +title: Simulate Actions Using a Headless Browser +challengeType: 2 +dashedName: simulate-actions-using-a-headless-browser +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +In the next challenges, you'll simulate human interaction with a page by using a headless browser. + +Headless browsers are web browsers without a GUI. They are able to render and interpret HTML, CSS, and JavaScript the same way a regular browser would, making them particularly useful for testing web pages. + +For the following challenges you'll use Zombie.js, which is a lightweight headless browser that doesn't rely on additional binaries to be installed. This feature makes it usable in limited environments like Replit. But there are many other, more powerful headless browser options. + +Mocha allows you to run some code before any of the actual tests run. This can be useful to do things like add entries to a database which will be used in the rest of the tests. + +With a headless browser, before running tests, you need to **visit** the page you'll test. + +The `suiteSetup` hook is executed only once at the beginning of a test suite. + +There are several other hook types that can execute code before each test, after each test, or at the end of a test suite. See the Mocha docs for more information. + +# --instructions-- + +Within `tests/2_functional-tests.js`, immediately after the `Browser` declaration, add your project URL to the `site` property of the variable: + +```js +Browser.site = 'https://boilerplate-mochachai.your-username.repl.co'; // Your URL here +``` + +Then at the root level of the `'Functional Tests with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code: + +```js +const browser = new Browser(); +``` + +And use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code: + +```js +suiteSetup(function(done) { + return browser.visit('/', done); +}); +``` + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md new file mode 100644 index 00000000000..3701b31bc01 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md @@ -0,0 +1,101 @@ +--- +id: 587d824b367417b2b2512c49 +title: Test for Truthiness +challengeType: 2 +forumTopicId: 301596 +dashedName: test-for-truthiness +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`isTrue()` will test for the boolean value `true` and `isNotTrue()` will pass when given anything but the boolean value of `true`. + +```js +assert.isTrue(true, 'This will pass with the boolean value true'); +assert.isTrue('true', 'This will NOT pass with the string value "true"'); +assert.isTrue(1, 'This will NOT pass with the number value 1'); +``` + +`isFalse()` and `isNotFalse()` also exist, and behave similarly to their true counterparts except they look for the boolean value of `false`. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#4` in the `Basic Assertions` suite, change each `assert` to either `assert.isTrue` or `assert.isNotTrue` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isTrue` vs. `isNotTrue`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then( + (data) => { + assert.equal(data.assertions[0].method, 'isTrue', 'True is true'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isTrue` vs. `isNotTrue`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'isTrue', + 'Double negation of a truthy value is true' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `isTrue` vs. `isNotTrue`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then( + (data) => { + assert.equal( + data.assertions[2].method, + 'isNotTrue', + 'A truthy object is not true - neither is a false one' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md new file mode 100644 index 00000000000..fca2f5c03fa --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md @@ -0,0 +1,79 @@ +--- +id: 587d824d367417b2b2512c53 +title: Test if a String Contains a Substring +challengeType: 2 +forumTopicId: 301597 +dashedName: test-if-a-string-contains-a-substring +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`include()` and `notInclude()` work for strings too! `include()` asserts that the actual string contains the expected substring. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#14` in the `Strings` suite, change each `assert` to either `assert.include` or `assert.notInclude` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `include` vs. `notInclude`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'include', + "'Arrow' contains 'row'..." + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `include` vs. `notInclude`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'notInclude', + "... a 'dart' doesn't contain a 'queue'" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md new file mode 100644 index 00000000000..9a4011b0a3f --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md @@ -0,0 +1,87 @@ +--- +id: 587d824c367417b2b2512c4f +title: Test if a Value Falls within a Specific Range +challengeType: 2 +forumTopicId: 301598 +dashedName: test-if-a-value-falls-within-a-specific-range +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +```javascript +.approximately(actual, expected, delta, [message]) +``` + +Asserts that the `actual` is equal to `expected`, to within a +/- `delta` range. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#10` in the `Comparisons` suite, change each `assert` to `assert.approximately` to make the test pass (should evaluate to `true`). + +Choose the minimum range (3rd parameter) to make the test always pass. It should be less than 1. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=9').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct range for the first assertion - `approximately(actual, expected, range)`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=9').then( + (data) => { + assert.equal(data.assertions[0].method, 'approximately'); + assert.equal( + data.assertions[0].args[2], + 0.5, + "weirdNumbers(0.5) is in the range (0.5, 1.5]. It's within 1 +/- 0.5" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct range for the second assertion - `approximately(actual, expected, range)`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=9').then( + (data) => { + assert.equal(data.assertions[1].method, 'approximately'); + assert.equal( + data.assertions[1].args[2], + 0.8, + "weirdNumbers(0.2) is in the range (0.2, 1.2]. It's within 1 +/- 0.8" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md new file mode 100644 index 00000000000..ed496b279de --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md @@ -0,0 +1,93 @@ +--- +id: 587d824d367417b2b2512c52 +title: Test if a Value is a String +challengeType: 2 +forumTopicId: 301599 +dashedName: test-if-a-value-is-a-string +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`isString` or `isNotString` asserts that the actual value is a string. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#13` in the `Strings` suite, change each `assert` to either `assert.isString` or `assert.isNotString` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isString` vs. `isNotString`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'isNotString', + 'A float number is not a string' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isString` vs. `isNotString`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'isString', + 'environment vars are strings (or undefined)' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `isString` vs. `isNotString`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then( + (data) => { + assert.equal(data.assertions[2].method, 'isString', 'A JSON is a string'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md new file mode 100644 index 00000000000..33494f9018f --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md @@ -0,0 +1,77 @@ +--- +id: 587d824d367417b2b2512c50 +title: Test if a Value is an Array +challengeType: 2 +forumTopicId: 301600 +dashedName: test-if-a-value-is-an-array +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#11` in the `Arrays` suite, change each `assert` to either `assert.isArray` or `assert.isNotArray` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isArray` vs. `isNotArray`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'isArray', + 'String.prototype.split() returns an Array' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isArray` vs. `isNotArray`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'isNotArray', + 'Array.prototype.indexOf() returns a number' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md new file mode 100644 index 00000000000..ec0a6859699 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md @@ -0,0 +1,133 @@ +--- +id: 587d824e367417b2b2512c56 +title: Test if a Value is of a Specific Data Structure Type +challengeType: 2 +forumTopicId: 301601 +dashedName: test-if-a-value-is-of-a-specific-data-structure-type +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`#typeOf` asserts that value's type is the given string, as determined by `Object.prototype.toString`. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#17` in the `Objects` suite, change each `assert` to either `assert.typeOf` or `assert.notTypeOf` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `typeOf` vs. `notTypeOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'typeOf', + 'myCar is typeOf Object' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `typeOf` vs. `notTypeOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'typeOf', + 'Car.model is a String' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `typeOf` vs. `notTypeOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then( + (data) => { + assert.equal( + data.assertions[2].method, + 'notTypeOf', + 'Plane.wings is a Number (not a String)' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the fourth assertion - `typeOf` vs. `notTypeOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then( + (data) => { + assert.equal( + data.assertions[3].method, + 'typeOf', + 'Plane.engines is an Array' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the fifth assertion - `typeOf` vs. `notTypeOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then( + (data) => { + assert.equal( + data.assertions[4].method, + 'typeOf', + 'Car.wheels is a Number' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md new file mode 100644 index 00000000000..ee0ccb85d39 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md @@ -0,0 +1,95 @@ +--- +id: 587d824b367417b2b2512c47 +title: Test if a Variable or Function is Defined +challengeType: 2 +forumTopicId: 301602 +dashedName: test-if-a-variable-or-function-is-defined +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#2` in the `Basic Assertions` suite, change each `assert` to either `assert.isDefined()` or `assert.isUndefined()` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isDefined` vs. `isUndefined`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'isDefined', + 'Null is not undefined' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isDefined` vs. `isUndefined`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'isUndefined', + 'Undefined is undefined' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `isDefined` vs. `isUndefined`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then( + (data) => { + assert.equal( + data.assertions[2].method, + 'isDefined', + 'A string is not undefined' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md new file mode 100644 index 00000000000..d82e11e7d65 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md @@ -0,0 +1,77 @@ +--- +id: 587d824d367417b2b2512c51 +title: Test if an Array Contains an Item +challengeType: 2 +forumTopicId: 301603 +dashedName: test-if-an-array-contains-an-item +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#12` in the `Arrays` suite, change each `assert` to either `assert.include` or `assert.notInclude` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `include` vs. `notInclude`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'notInclude', + "It's summer in july..." + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `include` vs. `notInclude`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'include', + 'JavaScript is a backend language !!' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md new file mode 100644 index 00000000000..91eb9dc3687 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md @@ -0,0 +1,93 @@ +--- +id: 587d824e367417b2b2512c55 +title: Test if an Object has a Property +challengeType: 2 +forumTopicId: 301604 +dashedName: test-if-an-object-has-a-property +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`property` asserts that the actual object has a given property. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#16` in the `Objects` suite, change each `assert` to either `assert.property` or `assert.notProperty` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `property` vs. `notProperty`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'notProperty', + 'A car has not wings' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `property` vs. `notProperty`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'property', + 'planes have engines' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `property` vs. `notProperty`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then( + (data) => { + assert.equal(data.assertions[2].method, 'property', 'Cars have wheels'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md new file mode 100644 index 00000000000..946c69cfe43 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md @@ -0,0 +1,115 @@ +--- +id: 587d824e367417b2b2512c57 +title: Test if an Object is an Instance of a Constructor +challengeType: 2 +forumTopicId: 301605 +dashedName: test-if-an-object-is-an-instance-of-a-constructor +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`#instanceOf` asserts that an object is an instance of a constructor. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#18` in the `Objects` suite, change each `assert` to either `assert.instanceOf` or `assert.notInstanceOf` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `instanceOf` vs. `notInstanceOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'notInstanceOf', + 'myCar is not an instance of Plane' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `instanceOf` vs. `notInstanceOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'instanceOf', + 'airlinePlane is an instance of Plane' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `instanceOf` vs. `notInstanceOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then( + (data) => { + assert.equal( + data.assertions[2].method, + 'instanceOf', + 'everything is an Object in JavaScript...' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the fourth assertion - `instanceOf` vs. `notInstanceOf`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then( + (data) => { + assert.equal( + data.assertions[3].method, + 'notInstanceOf', + 'myCar.wheels is not an instance of String' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md new file mode 100644 index 00000000000..a9fccf8d399 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md @@ -0,0 +1,109 @@ +--- +id: 587d824c367417b2b2512c4e +title: Test if One Value is Below or At Least as Large as Another +challengeType: 2 +forumTopicId: 301606 +dashedName: test-if-one-value-is-below-or-at-least-as-large-as-another +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#9` in the `Comparisons` suite, change each `assert` to either `assert.isBelow` or `assert.isAtLeast` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isBelow` vs. `isAtLeast`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'isAtLeast', + '5 is at least (>=) 5' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isBelow` vs. `isAtLeast`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'isAtLeast', + '2 * Math.random() is at least 0' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `isBelow` vs. `isAtLeast`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then( + (data) => { + assert.equal(data.assertions[2].method, 'isBelow', '1 is smaller than 2'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the fourth assertion - `isBelow` vs. `isAtLeast`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then( + (data) => { + assert.equal( + data.assertions[3].method, + 'isBelow', + '2/3 (0.6666) is smaller than 1' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md new file mode 100644 index 00000000000..ee9e6d2146c --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md @@ -0,0 +1,87 @@ +--- +id: 587d824b367417b2b2512c48 +title: Use Assert.isOK and Assert.isNotOK +challengeType: 2 +forumTopicId: 301607 +dashedName: use-assert-isok-and-assert-isnotok +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`isOk()` will test for a truthy value, and `isNotOk()` will test for a falsy value. + +To learn more about truthy and falsy values, try our Falsy Bouncer challenge. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#3` in the `Basic Assertions` suite, change each `assert` to either `assert.isOk()` or `assert.isNotOk()` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `isOk` vs. `isNotOk`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then( + (data) => { + assert.equal(data.assertions[0].method, 'isNotOk', 'Null is falsy'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `isOk` vs. `isNotOk`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then( + (data) => { + assert.equal(data.assertions[1].method, 'isOk', 'A string is truthy'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `isOk` vs. `isNotOk`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then( + (data) => { + assert.equal(data.assertions[2].method, 'isOk', 'true is truthy'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md new file mode 100644 index 00000000000..2d85d68d696 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md @@ -0,0 +1,79 @@ +--- +id: 587d824d367417b2b2512c54 +title: Use Regular Expressions to Test a String +challengeType: 2 +forumTopicId: 301608 +dashedName: use-regular-expressions-to-test-a-string +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`match()` asserts that the actual value matches the second argument regular expression. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#15` in the `Strings` suite, change each `assert` to either `assert.match` or `assert.notMatch` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `match` vs. `notMatch`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'match', + "'# name:John Doe, age:35' matches the regex" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `match` vs. `notMatch`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'notMatch', + "'# name:Paul Smith III, age:twenty-four' does not match the regex (the age must be numeric)" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md new file mode 100644 index 00000000000..fea760205f1 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md @@ -0,0 +1,111 @@ +--- +id: 587d824b367417b2b2512c4a +title: Use the Double Equals to Assert Equality +challengeType: 2 +forumTopicId: 301609 +dashedName: use-the-double-equals-to-assert-equality +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`equal()` compares objects using `==`. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#5` in the `Equality` suite, change each `assert` to either `assert.equal` or `assert.notEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `equal` vs. `notEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'equal', + 'Numbers are coerced into strings with == ' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `equal` vs. `notEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then( + (data) => { + assert.equal( + data.assertions[1].method, + 'notEqual', + ' == compares object references' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `equal` vs. `notEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then( + (data) => { + assert.equal( + data.assertions[2].method, + 'equal', + "6 * '2' is 12 ! It should be equal to '12'" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the fourth assertion - `equal` vs. `notEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then( + (data) => { + assert.equal(data.assertions[3].method, 'notEqual', "6 + '2' is '62'..."); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md new file mode 100644 index 00000000000..018f7a23f18 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md @@ -0,0 +1,111 @@ +--- +id: 587d824b367417b2b2512c4b +title: Use the Triple Equals to Assert Strict Equality +challengeType: 2 +forumTopicId: 301610 +dashedName: use-the-triple-equals-to-assert-strict-equality +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`strictEqual()` compares objects using `===`. + +# --instructions-- + +Within `tests/1_unit-tests.js` under the test labelled `#6` in the `Equality` suite, change each `assert` to either `assert.strictEqual` or `assert.notStrictEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. + +# --hints-- + +All tests should pass. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then( + (data) => { + assert.equal(data.state, 'passed'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the first assertion - `strictEqual` vs. `notStrictEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then( + (data) => { + assert.equal( + data.assertions[0].method, + 'notStrictEqual', + 'with strictEqual the type must match' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the second assertion - `strictEqual` vs. `notStrictEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then( + (data) => { + assert.equal(data.assertions[1].method, 'strictEqual', '3*2 = 6...'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the third assertion - `strictEqual` vs. `notStrictEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then( + (data) => { + assert.equal( + data.assertions[2].method, + 'strictEqual', + "6 * '2' is 12. Types match !" + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +You should choose the correct method for the fourth assertion - `strictEqual` vs. `notStrictEqual`. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then( + (data) => { + assert.equal( + data.assertions[3].method, + 'notStrictEqual', + 'Even if they have the same elements, the Arrays are notStrictEqual' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md new file mode 100644 index 00000000000..1ded4cbdef6 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -0,0 +1,337 @@ +--- +id: 5e601c0d5ac9d0ecd8b94afe +title: American British Translator +challengeType: 4 +forumTopicId: 462358 +dashedName: american-british-translator +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://american-british-translator.freecodecamp.rocks/. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +- All logic can go into `/components/translator.js` +- Complete the `/api/translate` route in `/routes/api.js` +- Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js` +- See the JavaScript files in `/components` for the different spelling and terms your application should translate +- To run the tests on Replit, set `NODE_ENV` to `test` without quotes in the `.env` file +- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" + +Write the following tests in `tests/1_unit-tests.js`: + +- Translate `Mangoes are my favorite fruit.` to British English +- Translate `I ate yogurt for breakfast.` to British English +- Translate `We had a party at my friend's condo.` to British English +- Translate `Can you toss this in the trashcan for me?` to British English +- Translate `The parking lot was full.` to British English +- Translate `Like a high tech Rube Goldberg machine.` to British English +- Translate `To play hooky means to skip class or work.` to British English +- Translate `No Mr. Bond, I expect you to die.` to British English +- Translate `Dr. Grosh will see you now.` to British English +- Translate `Lunch is at 12:15 today.` to British English +- Translate `We watched the footie match for a while.` to American English +- Translate `Paracetamol takes up to an hour to work.` to American English +- Translate `First, caramelise the onions.` to American English +- Translate `I spent the bank holiday at the funfair.` to American English +- Translate `I had a bicky then went to the chippy.` to American English +- Translate `I've just got bits and bobs in my bum bag.` to American English +- Translate `The car boot sale at Boxted Airfield was called off.` to American English +- Translate `Have you met Mrs Kalyani?` to American English +- Translate `Prof Joyner of King's College, London.` to American English +- Translate `Tea time is usually around 4 or 4.30.` to American English +- Highlight translation in `Mangoes are my favorite fruit.` +- Highlight translation in `I ate yogurt for breakfast.` +- Highlight translation in `We watched the footie match for a while.` +- Highlight translation in `Paracetamol takes up to an hour to work.` + +Write the following tests in `tests/2_functional-tests.js`: + +- Translation with text and locale fields: POST request to `/api/translate` +- Translation with text and invalid locale field: POST request to `/api/translate` +- Translation with missing text field: POST request to `/api/translate` +- Translation with missing locale field: POST request to `/api/translate` +- Translation with empty text: POST request to `/api/translate` +- Translation with text that needs no translation: POST request to `/api/translate` + +# --hints-- + +I can provide my own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/american-british-translator\.freecodecamp\.rocks/.test( + getUserInput('url') + ) + ); +}; +``` + +You can `POST` to `/api/translate` with a body containing `text` with the text to translate and `locale` with either `american-to-british` or `british-to-american`. The returned object should contain the submitted `text` and `translation` with the translated text. + +```js +async (getUserInput) => { + try { + const text = 'Mangoes are my favorite fruit.'; + const locale = 'american-to-british'; + const output = { + text: 'Mangoes are my favorite fruit.', + translation: + 'Mangoes are my favourite fruit.' + }; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text, locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.property(parsed, 'text'); + assert.property(parsed, 'translation'); + assert.deepEqual(parsed, output); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +The `/api/translate` route should handle the way time is written in American and British English. For example, ten thirty is written as "10.30" in British English and "10:30" in American English. The `span` element should wrap the entire time string, i.e. `10:30`. + +```js +async (getUserInput) => { + try { + const text = 'Lunch is at 12:15 today.'; + const locale = 'american-to-british'; + const output = { + text: text, + translation: 'Lunch is at 12.15 today.' + }; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text, locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.property(parsed, 'text'); + assert.property(parsed, 'translation'); + assert.deepEqual(parsed, output); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/components/american-to-british-titles.js` for the different titles your application should handle. + +```js +async (getUserInput) => { + try { + const text = 'Dr. Grosh will see you now.'; + const locale = 'american-to-british'; + const output = { + text: text, + translation: 'Dr Grosh will see you now.' + }; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text, locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.property(parsed, 'text'); + assert.property(parsed, 'translation'); + assert.deepEqual(parsed, output); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +Wrap any translated spelling or terms with `...` tags so they appear in green. + +```js +async (getUserInput) => { + try { + const text = 'Mangoes are my favorite fruit.'; + const locale = 'american-to-british'; + const output = { + text: 'Mangoes are my favorite fruit.', + translation: + 'Mangoes are my favourite fruit.' + }; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text, locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.property(parsed, 'text'); + assert.property(parsed, 'translation'); + assert.deepEqual(parsed, output); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +If one or more of the required fields is missing, return `{ error: 'Required field(s) missing' }`. + +```js +async (getUserInput) => { + try { + const locale = 'american-to-british'; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.property(parsed, 'error'); + assert.equal(parsed.error, 'Required field(s) missing'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +If `text` is empty, return `{ error: 'No text to translate' }` + +```js +async (getUserInput) => { + try { + const locale = 'american-to-british'; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text: '', locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.property(parsed, 'error'); + assert.equal(parsed.error, 'No text to translate'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +If `locale` does not match one of the two specified locales, return `{ error: 'Invalid value for locale field' }`. + +```js +async (getUserInput) => { + try { + const text = "Ceci n'est pas une pipe"; + const locale = 'french-to-american'; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text, locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.property(parsed, 'error'); + assert.equal(parsed.error, 'Invalid value for locale field'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +If `text` requires no translation, return `"Everything looks good to me!"` for the `translation` value. + +```js +async (getUserInput) => { + try { + const locale = 'british-to-american'; + const output = { + text: 'SaintPeter and nhcarrigan give their regards!', + translation: 'Everything looks good to me!' + }; + let data = await fetch(getUserInput('url') + '/api/translate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ text: output.text, locale }) + }); + let parsed = await data.json(); + assert.isObject(parsed); + assert.isObject(parsed); + assert.property(parsed, 'text'); + assert.property(parsed, 'translation'); + assert.deepEqual(parsed, output); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +All 24 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for. + +```js +async (getUserInput) => { + try { + const getTests = await $.get(getUserInput('url') + '/_api/get-tests'); + assert.isArray(getTests); + const unitTests = getTests.filter((test) => { + return !!test.context.match(/Unit Tests/gi); + }); + assert.isAtLeast(unitTests.length, 24, 'At least 24 tests passed'); + unitTests.forEach((test) => { + assert.equal(test.state, 'passed', 'Tests in Passed State'); + assert.isAtLeast( + test.assertions.length, + 1, + 'At least one assertion per test' + ); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +All 6 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the functionality you should write tests for. + +```js +async (getUserInput) => { + try { + const getTests = await $.get(getUserInput('url') + '/_api/get-tests'); + assert.isArray(getTests); + const functTests = getTests.filter((test) => { + return !!test.context.match(/Functional Tests/gi); + }); + assert.isAtLeast(functTests.length, 6, 'At least 6 tests passed'); + functTests.forEach((test) => { + assert.equal(test.state, 'passed', 'Tests in Passed State'); + assert.isAtLeast( + test.assertions.length, + 1, + 'At least one assertion per test' + ); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md new file mode 100644 index 00000000000..bfb32ba850b --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md @@ -0,0 +1,318 @@ +--- +id: 587d8249367417b2b2512c41 +title: Metric-Imperial Converter +challengeType: 4 +forumTopicId: 301570 +dashedName: metric-imperial-converter +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://metric-imperial-converter.freecodecamp.rocks/. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +- Complete the necessary conversion logic in `/controllers/convertHandler.js` +- Complete the necessary routes in `/routes/api.js` +- Copy the `sample.env` file to `.env` and set the variables appropriately +- To run the tests uncomment `NODE_ENV=test` in your `.env` file +- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" + +Write the following tests in `tests/1_unit-tests.js`: + +- `convertHandler` should correctly read a whole number input. +- `convertHandler` should correctly read a decimal number input. +- `convertHandler` should correctly read a fractional input. +- `convertHandler` should correctly read a fractional input with a decimal. +- `convertHandler` should correctly return an error on a double-fraction (i.e. `3/2/3`). +- `convertHandler` should correctly default to a numerical input of `1` when no numerical input is provided. +- `convertHandler` should correctly read each valid input unit. +- `convertHandler` should correctly return an error for an invalid input unit. +- `convertHandler` should return the correct return unit for each valid input unit. +- `convertHandler` should correctly return the spelled-out string unit for each valid input unit. +- `convertHandler` should correctly convert `gal` to `L`. +- `convertHandler` should correctly convert `L` to `gal`. +- `convertHandler` should correctly convert `mi` to `km`. +- `convertHandler` should correctly convert `km` to `mi`. +- `convertHandler` should correctly convert `lbs` to `kg`. +- `convertHandler` should correctly convert `kg` to `lbs`. + +Write the following tests in `tests/2_functional-tests.js`: + +- Convert a valid input such as `10L`: `GET` request to `/api/convert`. +- Convert an invalid input such as `32g`: `GET` request to `/api/convert`. +- Convert an invalid number such as `3/7.2/4kg`: `GET` request to `/api/convert`. +- Convert an invalid number AND unit such as `3/7.2/4kilomegagram`: `GET` request to `/api/convert`. +- Convert with no number such as `kg`: `GET` request to `/api/convert`. + +# --hints-- + +You can provide your own project, not the example URL. + +```js +getUserInput => { + assert( + !/.*\/metric-imperial-converter\.freecodecamp\.rocks/.test( + getUserInput('url') + ) + ); +}; +``` + +You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit) + +```js + +``` + +You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L) + +```js +async getUserInput => { + try { + const data1 = await $.get(getUserInput('url') + '/api/convert?input=1gal'); + assert.equal(data1.returnNum, 3.78541); + assert.equal(data1.returnUnit, 'L'); + const data2 = await $.get(getUserInput('url') + '/api/convert?input=10gal'); + assert.equal(data2.returnNum, 37.8541); + assert.equal(data2.returnUnit, 'L'); + const data3 = await $.get(getUserInput('url') + '/api/convert?input=1l'); + assert.equal(data3.returnNum, 0.26417); + assert.equal(data3.returnUnit, 'gal'); + const data4 = await $.get(getUserInput('url') + '/api/convert?input=10l'); + assert.equal(data4.returnNum, 2.64172); + assert.equal(data4.returnUnit, 'gal'); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +You can convert `'lbs'` to `'kg'` and vice versa. (1 lbs to 0.453592 kg) + +```js +async getUserInput => { + try { + const data1 = await $.get(getUserInput('url') + '/api/convert?input=1lbs'); + assert.equal(data1.returnNum, 0.45359); + assert.equal(data1.returnUnit, 'kg'); + const data2 = await $.get(getUserInput('url') + '/api/convert?input=10lbs'); + assert.equal(data2.returnNum, 4.53592); + assert.equal(data2.returnUnit, 'kg'); + const data3 = await $.get(getUserInput('url') + '/api/convert?input=1kg'); + assert.equal(data3.returnNum, 2.20462); + assert.equal(data3.returnUnit, 'lbs'); + const data4 = await $.get(getUserInput('url') + '/api/convert?input=10kg'); + assert.equal(data4.returnNum, 22.04624); + assert.equal(data4.returnUnit, 'lbs'); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +You can convert `'mi'` to `'km'` and vice versa. (1 mi to 1.60934 km) + +```js +async getUserInput => { + try { + const data1 = await $.get(getUserInput('url') + '/api/convert?input=1mi'); + assert.equal(data1.returnNum, 1.60934); + assert.equal(data1.returnUnit, 'km'); + const data2 = await $.get(getUserInput('url') + '/api/convert?input=10mi'); + assert.equal(data2.returnNum, 16.0934); + assert.equal(data2.returnUnit, 'km'); + const data3 = await $.get(getUserInput('url') + '/api/convert?input=1km'); + assert.equal(data3.returnNum, 0.62137); + assert.equal(data3.returnUnit, 'mi'); + const data4 = await $.get(getUserInput('url') + '/api/convert?input=10km'); + assert.equal(data4.returnNum, 6.21373); + assert.equal(data4.returnUnit, 'mi'); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +All incoming units should be accepted in both upper and lower case, but should be returned in both the `initUnit` and `returnUnit` in lower case, except for liter, which should be represented as an uppercase `'L'`. + +```js +async getUserInput => { + try { + const data1 = await $.get(getUserInput('url') + '/api/convert?input=1gal'); + assert.equal(data1.initUnit, 'gal'); + assert.equal(data1.returnUnit, 'L'); + const data2 = await $.get(getUserInput('url') + '/api/convert?input=10L'); + assert.equal(data2.initUnit, 'L'); + assert.equal(data2.returnUnit, 'gal'); + const data3 = await $.get(getUserInput('url') + '/api/convert?input=1l'); + assert.equal(data3.initUnit, 'L'); + assert.equal(data3.returnUnit, 'gal'); + const data4 = await $.get(getUserInput('url') + '/api/convert?input=10KM'); + assert.equal(data4.initUnit, 'km'); + assert.equal(data4.returnUnit, 'mi'); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +If the unit of measurement is invalid, returned will be `'invalid unit'`. + +```js +async getUserInput => { + try { + const data = await $.get(getUserInput('url') + '/api/convert?input=1min'); + assert(data.error === 'invalid unit' || data === 'invalid unit'); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +If the number is invalid, returned will be `'invalid number'`. + +```js +async getUserInput => { + try { + const data = await $.get( + getUserInput('url') + '/api/convert?input=1//2gal' + ); + assert(data.error === 'invalid number' || data === 'invalid number'); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +If both the unit and number are invalid, returned will be `'invalid number and unit'`. + +```js +async getUserInput => { + try { + const data = await $.get( + getUserInput('url') + '/api/convert?input=1//2min' + ); + assert( + data.error === 'invalid number and unit' || + data === 'invalid number and unit' + ); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +You can use fractions, decimals or both in the parameter (ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1. + +```js +async getUserInput => { + try { + const data1 = await $.get(getUserInput('url') + '/api/convert?input=mi'); + assert.approximately(data1.initNum, 1, 0.001); + assert.approximately(data1.returnNum, 1.60934, 0.001); + assert.equal(data1.returnUnit, 'km'); + const data2 = await $.get(getUserInput('url') + '/api/convert?input=1/5mi'); + assert.approximately(data2.initNum, 1 / 5, 0.1); + assert.approximately(data2.returnNum, 0.32187, 0.001); + assert.equal(data2.returnUnit, 'km'); + const data3 = await $.get( + getUserInput('url') + '/api/convert?input=1.5/7km' + ); + assert.approximately(data3.initNum, 1.5 / 7, 0.001); + assert.approximately(data3.returnNum, 0.13315, 0.001); + assert.equal(data3.returnUnit, 'mi'); + const data4 = await $.get( + getUserInput('url') + '/api/convert?input=3/2.7km' + ); + assert.approximately(data4.initNum, 3 / 2.7, 0.001); + assert.approximately(data4.returnNum, 0.69041, 0.001); + assert.equal(data4.returnUnit, 'mi'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +Your return will consist of the `initNum`, `initUnit`, `returnNum`, `returnUnit`, and `string` spelling out units in the format `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` with the result rounded to 5 decimals. + +```js +async getUserInput => { + try { + const data = await $.get(getUserInput('url') + '/api/convert?input=2mi'); + assert.equal(data.initNum, 2); + assert.equal(data.initUnit, 'mi'); + assert.approximately(data.returnNum, 3.21868, 0.001); + assert.equal(data.returnUnit, 'km', 'returnUnit did not match'); + assert.equal(data.string, '2 miles converts to 3.21868 kilometers'); + } catch (xhr) { + throw new Error(xhr.responseText || xhr.message); + } +}; +``` + +All 16 unit tests are complete and passing. + +```js +async getUserInput => { + try { + const getTests = await $.get(getUserInput('url') + '/_api/get-tests'); + assert.isArray(getTests); + const unitTests = getTests.filter(test => { + return !!test.context.match(/Unit Tests/gi); + }); + assert.isAtLeast(unitTests.length, 16, 'At least 16 tests passed'); + unitTests.forEach(test => { + assert.equal(test.state, 'passed', 'Tests in Passed State'); + assert.isAtLeast( + test.assertions.length, + 1, + 'At least one assertion per test' + ); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +All 5 functional tests are complete and passing. + +```js +async getUserInput => { + try { + const getTests = await $.get(getUserInput('url') + '/_api/get-tests'); + assert.isArray(getTests); + const functTests = getTests.filter(test => { + return !!test.context.match(/Functional Tests/gi); + }); + assert.isAtLeast(functTests.length, 5, 'At least 5 tests passed'); + functTests.forEach(test => { + assert.equal(test.state, 'passed', 'Tests in Passed State'); + assert.isAtLeast( + test.assertions.length, + 1, + 'At least one assertion per test' + ); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/personal-library.md new file mode 100644 index 00000000000..3a1b1573d67 --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/personal-library.md @@ -0,0 +1,221 @@ +--- +id: 587d824a367417b2b2512c43 +title: Personal Library +challengeType: 4 +forumTopicId: 301571 +dashedName: personal-library +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://personal-library.freecodecamp.rocks/. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +1. Add your MongoDB connection string to `.env` without quotes as `DB` + Example: `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib` +2. In your `.env` file set `NODE_ENV` to `test`, without quotes +3. You need to create all routes within `routes/api.js` +4. You will create all functional tests in `tests/2_functional-tests.js` + +# --hints-- + +You can provide your own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/personal-library\.freecodecamp\.rocks/.test(getUserInput('url')) + ); +}; +``` + +You can send a POST request to `/api/books` with `title` as part of the form data to add a book. The returned response will be an object with the `title` and a unique `_id` as keys. If `title` is not included in the request, the returned response should be the string `missing required field title`. + +```js +async (getUserInput) => { + try { + let data1 = await $.post(getUserInput('url') + '/api/books', { + title: 'Faux Book 1' + }); + assert.isObject(data1); + assert.property(data1, 'title'); + assert.equal(data1.title, 'Faux Book 1'); + assert.property(data1, '_id'); + let data2 = await $.post(getUserInput('url') + '/api/books'); + assert.isString(data2); + assert.equal(data2, 'missing required field title'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +You can send a GET request to `/api/books` and receive a JSON response representing all the books. The JSON response will be an array of objects with each object (book) containing `title`, `_id`, and `commentcount` properties. + +```js +async (getUserInput) => { + try { + let url = getUserInput('url') + '/api/books'; + let a = $.post(url, { title: 'Faux Book A' }); + let b = $.post(url, { title: 'Faux Book B' }); + let c = $.post(url, { title: 'Faux Book C' }); + await Promise.all([a, b, c]).then(async () => { + let data = await $.get(url); + assert.isArray(data); + assert.isAtLeast(data.length, 3); + data.forEach((book) => { + assert.isObject(book); + assert.property(book, 'title'); + assert.isString(book.title); + assert.property(book, '_id'); + assert.property(book, 'commentcount'); + assert.isNumber(book.commentcount); + }); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +You can send a GET request to `/api/books/{_id}` to retrieve a single object of a book containing the properties `title`, `_id`, and a `comments` array (empty array if no comments present). If no book is found, return the string `no book exists`. + +```js +async (getUserInput) => { + try { + let url = getUserInput('url') + '/api/books'; + let noBook = await $.get(url + '/5f665eb46e296f6b9b6a504d'); + assert.isString(noBook); + assert.equal(noBook, 'no book exists'); + let sampleBook = await $.post(url, { title: 'Faux Book Alpha' }); + assert.isObject(sampleBook); + let bookId = sampleBook._id; + let bookQuery = await $.get(url + '/' + bookId); + assert.isObject(bookQuery); + assert.property(bookQuery, 'title'); + assert.equal(bookQuery.title, 'Faux Book Alpha'); + assert.property(bookQuery, 'comments'); + assert.isArray(bookQuery.comments); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +You can send a POST request containing `comment` as the form body data to `/api/books/{_id}` to add a comment to a book. The returned response will be the books object similar to GET `/api/books/{_id}` request in an earlier test. If `comment` is not included in the request, return the string `missing required field comment`. If no book is found, return the string `no book exists`. + +```js +async (getUserInput) => { + try { + let url = getUserInput('url') + '/api/books'; + let commentTarget = await $.post(url, { title: 'Notable Book' }); + assert.isObject(commentTarget); + let bookId = commentTarget._id; + let bookCom1 = await $.post(url + '/' + bookId, { + comment: 'This book is fab!' + }); + let bookCom2 = await $.post(url + '/' + bookId, { + comment: 'I did not care for it' + }); + assert.isObject(bookCom2); + assert.property(bookCom2, '_id'); + assert.property(bookCom2, 'title'); + assert.property(bookCom2, 'comments'); + assert.lengthOf(bookCom2.comments, 2); + bookCom2.comments.forEach((comment) => { + assert.isString(comment); + assert.oneOf(comment, ['This book is fab!', 'I did not care for it']); + }); + let commentErr = await $.post(url + '/' + bookId); + assert.isString(commentErr); + assert.equal(commentErr, 'missing required field comment'); + let failingComment = await $.post(url + '/5f665eb46e296f6b9b6a504d', { + comment: 'Never Seen Comment' + }); + assert.isString(failingComment); + assert.equal(failingComment, 'no book exists'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +You can send a DELETE request to `/api/books/{_id}` to delete a book from the collection. The returned response will be the string `delete successful` if successful. If no book is found, return the string `no book exists`. + +```js +async (getUserInput) => { + try { + let url = getUserInput('url') + '/api/books'; + let deleteTarget = await $.post(url, { title: 'Deletable Book' }); + assert.isObject(deleteTarget); + let bookId = deleteTarget._id; + let doDelete = await $.ajax({ url: url + '/' + bookId, type: 'DELETE' }); + assert.isString(doDelete); + assert.equal(doDelete, 'delete successful'); + let failingDelete = await $.ajax({ + url: url + '/5f665eb46e296f6b9b6a504d', + type: 'DELETE' + }); + assert.isString(failingDelete); + assert.equal(failingDelete, 'no book exists'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +You can send a DELETE request to `/api/books` to delete all books in the database. The returned response will be the string `'complete delete successful` if successful. + +```js +async (getUserInput) => { + try { + const deleteAll = await $.ajax({ + url: getUserInput('url') + '/api/books', + type: 'DELETE' + }); + assert.isString(deleteAll); + assert.equal(deleteAll, 'complete delete successful'); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +All 10 functional tests required are complete and passing. + +```js +async (getUserInput) => { + try { + const getTests = await $.get(getUserInput('url') + '/_api/get-tests'); + assert.isArray(getTests); + assert.isAtLeast(getTests.length, 10, 'At least 10 tests passed'); + getTests.forEach((test) => { + assert.equal(test.state, 'passed', 'Test in Passed State'); + assert.isAtLeast( + test.assertions.length, + 1, + 'At least one assertion per test' + ); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md new file mode 100644 index 00000000000..bf42138e9fd --- /dev/null +++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md @@ -0,0 +1,407 @@ +--- +id: 5e601bf95ac9d0ecd8b94afd +title: Sudoku Solver +challengeType: 4 +forumTopicId: 462357 +dashedName: sudoku-solver +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://sudoku-solver.freecodecamp.rocks/. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +- All puzzle logic can go into `/controllers/sudoku-solver.js` + - The `validate` function should take a given puzzle string and check it to see if it has 81 valid characters for the input. + - The `check` functions should be validating against the *current* state of the board. + - The `solve` function should handle solving any given valid puzzle string, not just the test inputs and solutions. You are expected to write out the logic to solve this. +- All routing logic can go into `/routes/api.js` +- See the `puzzle-strings.js` file in `/controllers` for some sample puzzles your application should solve +- To run the challenge tests on this page, set `NODE_ENV` to `test` without quotes in the `.env` file +- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" + +Write the following tests in `tests/1_unit-tests.js`: + +- Logic handles a valid puzzle string of 81 characters +- Logic handles a puzzle string with invalid characters (not 1-9 or `.`) +- Logic handles a puzzle string that is not 81 characters in length +- Logic handles a valid row placement +- Logic handles an invalid row placement +- Logic handles a valid column placement +- Logic handles an invalid column placement +- Logic handles a valid region (3x3 grid) placement +- Logic handles an invalid region (3x3 grid) placement +- Valid puzzle strings pass the solver +- Invalid puzzle strings fail the solver +- Solver returns the expected solution for an incomplete puzzle + +Write the following tests in `tests/2_functional-tests.js` + +- Solve a puzzle with valid puzzle string: POST request to `/api/solve` +- Solve a puzzle with missing puzzle string: POST request to `/api/solve` +- Solve a puzzle with invalid characters: POST request to `/api/solve` +- Solve a puzzle with incorrect length: POST request to `/api/solve` +- Solve a puzzle that cannot be solved: POST request to `/api/solve` +- Check a puzzle placement with all fields: POST request to `/api/check` +- Check a puzzle placement with single placement conflict: POST request to `/api/check` +- Check a puzzle placement with multiple placement conflicts: POST request to `/api/check` +- Check a puzzle placement with all placement conflicts: POST request to `/api/check` +- Check a puzzle placement with missing required fields: POST request to `/api/check` +- Check a puzzle placement with invalid characters: POST request to `/api/check` +- Check a puzzle placement with incorrect length: POST request to `/api/check` +- Check a puzzle placement with invalid placement coordinate: POST request to `/api/check` +- Check a puzzle placement with invalid placement value: POST request to `/api/check` + +# --hints-- + +You should provide your own project, not the example URL. + +```js +(getUserInput) => { + const url = getUserInput('url'); + assert(!/.*\/sudoku-solver\.freecodecamp\.rocks/.test(getUserInput('url'))); +}; +``` + +You can `POST` `/api/solve` with form data containing `puzzle` which will be a string containing a combination of numbers (1-9) and periods `.` to represent empty spaces. The returned object will contain a `solution` property with the solved puzzle. + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const output = + '769235418851496372432178956174569283395842761628713549283657194516924837947381625'; + const data = await fetch(getUserInput('url') + '/api/solve', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input }) + }); + const parsed = await data.json(); + assert.property(parsed, 'solution'); + assert.equal(parsed.solution, output); +}; +``` + +If the object submitted to `/api/solve` is missing `puzzle`, the returned value will be `{ error: 'Required field missing' }` + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const output = 'Required field missing'; + const data = await fetch(getUserInput('url') + '/api/solve', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ notpuzzle: input }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); +}; +``` + +If the puzzle submitted to `/api/solve` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` + +```js +async (getUserInput) => { + const input = + 'AA9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const output = 'Invalid characters in puzzle'; + const data = await fetch(getUserInput('url') + '/api/solve', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); +}; +``` + +If the puzzle submitted to `/api/solve` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }` + +```js +async (getUserInput) => { + const inputs = [ + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6.', + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6...' + ]; + const output = 'Expected puzzle to be 81 characters long'; + for (const input of inputs) { + const data = await fetch(getUserInput('url') + '/api/solve', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); + } +}; +``` + +If the puzzle submitted to `/api/solve` is invalid or cannot be solved, the returned value will be `{ error: 'Puzzle cannot be solved' }` + +```js +async (getUserInput) => { + const input = + '9.9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const output = 'Puzzle cannot be solved'; + const data = await fetch(getUserInput('url') + '/api/solve', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); +}; +``` + +You can `POST` to `/api/check` an object containing `puzzle`, `coordinate`, and `value` where the `coordinate` is the letter A-I indicating the row, followed by a number 1-9 indicating the column, and `value` is a number from 1-9. + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const coordinate = 'A1'; + const value = '7'; + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'valid'); + assert.isTrue(parsed.valid); +}; +``` + +The return value from the `POST` to `/api/check` will be an object containing a `valid` property, which is `true` if the number may be placed at the provided coordinate and `false` if the number may not. If false, the returned object will also contain a `conflict` property which is an array containing the strings `"row"`, `"column"`, and/or `"region"` depending on which makes the placement invalid. + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const coordinate = 'A1'; + const value = '1'; + const conflict = ['row', 'column']; + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'valid'); + assert.isFalse(parsed.valid); + assert.property(parsed, 'conflict'); + assert.include(parsed.conflict, 'row'); + assert.include(parsed.conflict, 'column'); +}; +``` + +If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting. + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const coordinate = 'C3'; + const value = '2'; + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'valid'); + assert.isTrue(parsed.valid); +}; +``` + +If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` + +```js +async (getUserInput) => { + const input = + 'AA9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const coordinate = 'A1'; + const value = '1'; + const output = 'Invalid characters in puzzle'; + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); +}; +``` + +If the puzzle submitted to `/api/check` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }` + +```js +async (getUserInput) => { + const inputs = [ + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6.', + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6...' + ]; + const coordinate = 'A1'; + const value = '1'; + const output = 'Expected puzzle to be 81 characters long'; + for (const input of inputs) { + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); + } +}; +``` + +If the object submitted to `/api/check` is missing `puzzle`, `coordinate` or `value`, the returned value will be `{ error: 'Required field(s) missing' }` + +```js +async (getUserInput) => { + const inputs = [ + { + puzzle: '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..', + value: '1', + }, + { + puzzle: '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..', + coordinate: 'A1', + }, + { + coordinate: 'A1', + value: '1' + } + ]; + for (const input of inputs) { + const output = 'Required field(s) missing'; + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(input) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); + } +}; +``` + +If the coordinate submitted to `api/check` does not point to an existing grid cell, the returned value will be `{ error: 'Invalid coordinate'}` + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const output = 'Invalid coordinate'; + const coordinates = ['A0', 'A10', 'J1', 'A', '1', 'XZ18']; + const value = '7'; + for (const coordinate of coordinates) { + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); + } +}; +``` + +If the `value` submitted to `/api/check` is not a number between 1 and 9, the returned value will be `{ error: 'Invalid value' }` + +```js +async (getUserInput) => { + const input = + '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; + const output = 'Invalid value'; + const coordinate = 'A1'; + const values = ['0', '10', 'A']; + for (const value of values) { + const data = await fetch(getUserInput('url') + '/api/check', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ puzzle: input, coordinate, value }) + }); + const parsed = await data.json(); + assert.property(parsed, 'error'); + assert.equal(parsed.error, output); + } +}; +``` + +All 12 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for. + +```js +async (getUserInput) => { + try { + const getTests = await $.get(getUserInput('url') + '/_api/get-tests'); + assert.isArray(getTests); + const unitTests = getTests.filter((test) => { + return !!test.context.match(/Unit\s*Tests/gi); + }); + assert.isAtLeast(unitTests.length, 12, 'At least 12 tests passed'); + unitTests.forEach((test) => { + assert.equal(test.state, 'passed', 'Test in Passed State'); + assert.isAtLeast( + test.assertions.length, + 1, + 'At least one assertion per test' + ); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +All 14 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the expected functionality you should write tests for. + +```js +async (getUserInput) => { + try { + const getTests = await $.get(getUserInput('url') + '/_api/get-tests'); + assert.isArray(getTests); + const functTests = getTests.filter((test) => { + return !!test.context.match(/Functional\s*Tests/gi); + }); + assert.isAtLeast(functTests.length, 14, 'At least 14 tests passed'); + functTests.forEach((test) => { + assert.equal(test.state, 'passed', 'Test in Passed State'); + assert.isAtLeast( + test.assertions.length, + 1, + 'At least one assertion per test' + ); + }); + } catch (err) { + throw new Error(err.responseText || err.message); + } +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md new file mode 100644 index 00000000000..340cd5351d6 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md @@ -0,0 +1,47 @@ +--- +id: 5e9a093a74c4063ca6f7c160 +title: Data Cleaning and Visualizations +challengeType: 11 +videoId: mHjxzFS5_Z0 +bilibiliIds: + aid: 933107558 + bvid: BV1KM4y137Ny + cid: 409019632 +dashedName: data-cleaning-and-visualizations +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +When using Matplotlib's global API, what does the order of numbers mean here? + +```py +plt.subplot(1, 2, 1) +``` + +## --answers-- + +My figure will have one column, two rows, and I am going to start drawing in the first (left) plot. + +--- + +I am going to start drawing in the first (left) plot, my figure will have two rows, and my figure will have one column. + +--- + +My figure will have one row, two columns, and I am going to start drawing in the first (left) plot. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-duplicates.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-duplicates.md new file mode 100644 index 00000000000..14cab33625a --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-duplicates.md @@ -0,0 +1,43 @@ +--- +id: 5e9a093a74c4063ca6f7c15f +title: Data Cleaning Duplicates +challengeType: 11 +videoId: kj7QqjXhH6A +bilibiliIds: + aid: 675611672 + bvid: BV1VU4y1A7tu + cid: 409019368 +dashedName: data-cleaning-duplicates +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +The Python method `.duplicated()` returns a boolean Series for your DataFrame. `True` is the return value for rows that: + +## --answers-- + +contain a duplicate, where the value for the row contains the first occurrence of that value. + +--- + +contain a duplicate, where the value for the row is at least the second occurrence of that value. + +--- + +contain a duplicate, where the value for the row contains either the first or second occurrence. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md new file mode 100644 index 00000000000..e1a58cfd19c --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md @@ -0,0 +1,74 @@ +--- +id: 5e9a093a74c4063ca6f7c15e +title: Data Cleaning with DataFrames +challengeType: 11 +videoId: sTMN_pdI6S0 +bilibiliIds: + aid: 505597026 + bvid: BV1Yg411c7bx + cid: 409018948 +dashedName: data-cleaning-with-dataframes +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What will the following code print out? + +```py +import pandas as pd +import numpy as np + +s = pd.Series([np.nan, 1, 2, np.nan, 3]) +s = s.fillna(method='ffill') + +print(s) +``` + +## --answers-- + +
+0    1.0
+1    1.0
+2    2.0
+3    3.0
+4    3.0
+dtype: float64
+
+ +--- + +
+0    NaN
+1    1.0
+2    2.0
+3    2.0
+4    3.0
+dtype: float64
+
+ +--- + +
+0    NaN
+1    1.0
+2    2.0
+3    NaN
+4    3.0
+dtype: float64
+
+ +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md new file mode 100644 index 00000000000..64166a8d41e --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md @@ -0,0 +1,43 @@ +--- +id: 5e9a093a74c4063ca6f7c14f +title: How to use Jupyter Notebooks Intro +challengeType: 11 +videoId: h8caJq2Bb9w +bilibiliIds: + aid: 293035919 + bvid: BV1Hf4y1n7qr + cid: 409002965 +dashedName: how-to-use-jupyter-notebooks-intro +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What is **not** allowed in a Jupyter Notebook's cell? + +## --answers-- + +Markdown + +--- + +Python code + +--- + +An Excel sheet + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md new file mode 100644 index 00000000000..d266151844d --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md @@ -0,0 +1,42 @@ +--- +id: 5e9a093a74c4063ca6f7c150 +title: Jupyter Notebooks Cells +challengeType: 11 +videoId: 5PPegAs9aLA +bilibiliIds: + aid: 420510493 + bvid: BV19341117Hq + cid: 409003280 +dashedName: jupyter-notebooks-cells +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What are the three main types of Jupyter Notebook Cell? + +## --answers-- + +Code, Markdown, and Python + +--- + +Code, Markdown, and Raw + +--- + +Markdown, Python, and Raw + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md new file mode 100644 index 00000000000..be927727e87 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md @@ -0,0 +1,51 @@ +--- +id: 5e9a093a74c4063ca6f7c151 +title: Jupyter Notebooks Importing and Exporting Data +challengeType: 11 +videoId: k1msxD3JIxE +bilibiliIds: + aid: 975540688 + bvid: BV1n44y1b7Gi + cid: 409006337 +dashedName: jupyter-notebooks-importing-and-exporting-data +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What kind of data can you import and work with in a Jupyter Notebook? + +## --answers-- + +Excel files. + +--- + +CSV files. + +--- + +XML files. + +--- + +Data from an API. + +--- + +All of the above. + +## --video-solution-- + +5 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-boolean-arrays.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-boolean-arrays.md new file mode 100644 index 00000000000..630ad66ca26 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-boolean-arrays.md @@ -0,0 +1,61 @@ +--- +id: 5e9a093a74c4063ca6f7c156 +title: Numpy Boolean Arrays +challengeType: 11 +videoId: N1ttsMmcVMM +bilibiliIds: + aid: 208091324 + bvid: BV1Qh411p7V8 + cid: 409012711 +dashedName: numpy-boolean-arrays +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What will the following code print out? + +```py +a = np.arange(5) + +print(a <= 3) +``` + +## --answers-- + +```python +[False, False, False, False, True] +``` + +--- + +```python +[5] +``` + +--- + +```python +[0, 1, 2, 3] +``` + +--- + +```python +[True, True, True, True, False] +``` + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md new file mode 100644 index 00000000000..d9f980b8ae1 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md @@ -0,0 +1,43 @@ +--- +id: 5e9a093a74c4063ca6f7c152 +title: Numpy Introduction A +challengeType: 11 +videoId: P-JjV6GBCmk +bilibiliIds: + aid: 718079611 + bvid: BV18Q4y1k7om + cid: 409007080 +dashedName: numpy-introduction-a +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +Why is Numpy an important, but unpopular Python library? + +## --answers-- + +Often you won't work directly with Numpy. + +--- + +It is extremely slow. + +--- + +Working with Numpy is difficult. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md new file mode 100644 index 00000000000..f76d5bf6d1c --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md @@ -0,0 +1,47 @@ +--- +id: 5e9a093a74c4063ca6f7c153 +title: Numpy Introduction B +challengeType: 11 +videoId: YIqgrNLAZkA +bilibiliIds: + aid: 250503382 + bvid: BV1kv411w7vB + cid: 409010193 +dashedName: numpy-introduction-b +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +About how much memory does the integer `5` consume in plain Python? + +## --answers-- + +32 bits + +--- + +20 bytes + +--- + +16 bytes + +--- + +8 bits + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md new file mode 100644 index 00000000000..166ee7c6d05 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md @@ -0,0 +1,54 @@ +--- +id: 5e9a093a74c4063ca6f7c155 +title: Numpy Operations +challengeType: 11 +videoId: eqSVcJbaPdk +bilibiliIds: + aid: 378057123 + bvid: BV13f4y1w7od + cid: 409012507 +dashedName: numpy-operations +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What is the value of `a` after you run the following code? + +```py +a = np.arange(5) +a + 20 +``` + +## --answers-- + +```python +[20, 21, 22, 24, 24] +``` + +--- + +```python +[0, 1, 2, 3, 4] +``` + +--- + +```python +[25, 26, 27, 28, 29] +``` + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md new file mode 100644 index 00000000000..d16b2a8235f --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md @@ -0,0 +1,77 @@ +--- +id: 5e9a093a74c4063ca6f7c15b +title: Pandas Conditional Selection and Modifying DataFrames +challengeType: 11 +videoId: BFlH0fN5xRQ +bilibiliIds: + aid: 505598518 + bvid: BV1vg411c72y + cid: 409113534 +dashedName: pandas-conditional-selection-and-modifying-dataframes +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What will the following code print out? + +```py +import pandas as pd + +certificates_earned = pd.DataFrame({ + 'Certificates': [8, 2, 5, 6], + 'Time (in months)': [16, 5, 9, 12] +}) +names = ['Tom', 'Kris', 'Ahmad', 'Beau'] + +certificates_earned.index = names +longest_streak = pd.Series([13, 11, 9, 7], index=names) +certificates_earned['Longest streak'] = longest_streak + +print(certificates_earned) +``` + +## --answers-- + +
+Tom      13
+Kris     11
+Ahmad     9
+Beau      7
+Name: Longest streak, dtype: int64
+
+ +--- + +
+      Certificates  Time (in months)  Longest streak
+Tom               8                16              13
+Kris              2                 5              11
+Ahmad             5                 9               9
+Beau              6                12               7
+
+ +--- + +
+      Certificates   Longest streak
+Tom               8               13
+Kris              2               11
+Ahmad             5                9
+Beau              6                7
+
+ +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md new file mode 100644 index 00000000000..c9bd03fcb63 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md @@ -0,0 +1,62 @@ +--- +id: 5e9a093a74c4063ca6f7c15c +title: Pandas Creating Columns +challengeType: 11 +videoId: _sSo2XZoB3E +bilibiliIds: + aid: 975568901 + bvid: BV1b44y1b7Cg + cid: 409018052 +dashedName: pandas-creating-columns +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What code would add a "Certificates per month" column to the `certificates_earned` DataFrame like the one below? + +
      Certificates  Time (in months)  Certificates per month
+Tom               8                16                    0.50
+Kris              2                 5                    0.40
+Ahmad             5                 9                    0.56
+Beau              6                12                    0.50
+ +## --answers-- + +```py +certificates_earned['Certificates'] / +certificates_earned['Time (in months)'] +``` + +--- + +```py +certificates_earned['Certificates per month'] = round( + certificates_earned['Certificates'] / + certificates_earned['Time (in months)'] +) +``` + +--- + +```py +certificates_earned['Certificates per month'] = round( + certificates_earned['Certificates'] / + certificates_earned['Time (in months)'], 2 +) +``` + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-dataframes.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-dataframes.md new file mode 100644 index 00000000000..d43e94785ca --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-dataframes.md @@ -0,0 +1,70 @@ +--- +id: 5e9a093a74c4063ca6f7c15a +title: Pandas DataFrames +challengeType: 11 +videoId: 7SgFBYXaiH0 +bilibiliIds: + aid: 890503235 + bvid: BV1TP4y1h7qq + cid: 409014039 +dashedName: pandas-dataframes +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What will the following code print out? + +```py +import pandas as pd + +certificates_earned = pd.DataFrame({ + 'Certificates': [8, 2, 5, 6], + 'Time (in months)': [16, 5, 9, 12] +}) + +certificates_earned.index = ['Tom', 'Kris', 'Ahmad', 'Beau'] + +print(certificates_earned.iloc[2]) +``` + +## --answers-- + +
+Tom      16
+Kris      5
+Ahmad     9
+Beau     12
+Name: Time (in months), dtype: int64
+
+ +--- + +
+Certificates         6
+Time (in months)    12
+Name: Beau, dtype: int64
+
+ +--- + +
+Certificates        5
+Time (in months)    9
+Name: Ahmad, dtype: int64
+
+ +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-indexing-and-conditional-selection.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-indexing-and-conditional-selection.md new file mode 100644 index 00000000000..ed1e427084f --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-indexing-and-conditional-selection.md @@ -0,0 +1,69 @@ +--- +id: 5e9a093a74c4063ca6f7c159 +title: Pandas Indexing and Conditional Selection +challengeType: 11 +videoId: '-ZOrgV_aA9A' +bilibiliIds: + aid: 720604139 + bvid: BV1FQ4y1k7tC + cid: 409013650 +dashedName: pandas-indexing-and-conditional-selection +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What will the following code print out? + +```py +import pandas as pd + +certificates_earned = pd.Series( + [8, 2, 5, 6], + index=['Tom', 'Kris', 'Ahmad', 'Beau'] +) + +print(certificates_earned[certificates_earned > 5]) +``` + +## --answers-- + +
+Tom      True
+Kris     False
+Ahmad    False
+Beau     True
+dtype: int64
+
+ +--- + +
+Tom      8
+Ahmad    5
+Beau     6
+dtype: int64
+
+ +--- + +
+Tom      8
+Beau     6
+dtype: int64
+
+ +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-introduction.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-introduction.md new file mode 100644 index 00000000000..c1df4108803 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/pandas-introduction.md @@ -0,0 +1,72 @@ +--- +id: 5e9a093a74c4063ca6f7c158 +title: Pandas Introduction +challengeType: 11 +videoId: 0xACW-8cZU0 +bilibiliIds: + aid: 975510116 + bvid: BV1u44y1b7fD + cid: 409013433 +dashedName: pandas-introduction +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What will the following code print out? + +```py +import pandas as pd + +certificates_earned = pd.Series( + [8, 2, 5, 6], + index=['Tom', 'Kris', 'Ahmad', 'Beau'] +) + +print(certificates_earned) +``` + +## --answers-- + +```markup +Tom 8 +Kris 2 +Ahmad 5 +Beau 6 +dtype: int64 +``` + +--- + +```markup +Kris 2 +Ahmad 5 +Beau 6 +Tom 8 +dtype: int64 +``` + +--- + +```markup +Tom 8 +Kris 2 +Ahmad 5 +Beau 6 +Name: certificates_earned dtype: int64 +``` + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md new file mode 100644 index 00000000000..f2c5997639c --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md @@ -0,0 +1,47 @@ +--- +id: 5e9a093a74c4063ca6f7c164 +title: Parsing HTML and Saving Data +challengeType: 11 +videoId: bJaqnTWQmb0 +bilibiliIds: + aid: 335522976 + bvid: BV1RA411F7vi + cid: 409023170 +dashedName: parsing-html-and-saving-data +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What Python library has the `.read_html()` method we can use for parsing HTML documents and extracting tables? + +## --answers-- + +BeautifierSoupy + +--- + +WebReader + +--- + +HTTP-master + +--- + +Pandas + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md new file mode 100644 index 00000000000..fdce91d05f7 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md @@ -0,0 +1,43 @@ +--- +id: 5e9a093a74c4063ca6f7c166 +title: Python Functions and Collections +challengeType: 11 +videoId: NzpU17ZVlUw +bilibiliIds: + aid: 675544435 + bvid: BV1pU4y1N7JC + cid: 409023833 +dashedName: python-functions-and-collections +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What is the main difference between lists and tuples in Python? + +## --answers-- + +Tuples are immutable. + +--- + +Lists are ordered. + +--- + +Tuples are unordered. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md new file mode 100644 index 00000000000..8bd079a0a4f --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md @@ -0,0 +1,47 @@ +--- +id: 5e9a093a74c4063ca6f7c165 +title: Python Introduction +challengeType: 11 +videoId: PrQV9JkLhb4 +bilibiliIds: + aid: 805597530 + bvid: BV1634y1S7gD + cid: 409023550 +dashedName: python-introduction +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +How do we define blocks of code in the body of functions in Python? + +## --answers-- + +We use a set of curly braces, one on either side of each new block of our code. + +--- + +We use indentation, usually right-aligned 4 spaces. + +--- + +We do not denote blocks of code. + +--- + +We could use curly braces or indentation to denote blocks of code. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md new file mode 100644 index 00000000000..fddbd3b10c9 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md @@ -0,0 +1,60 @@ +--- +id: 5e9a093a74c4063ca6f7c167 +title: Python Iteration and Modules +challengeType: 11 +videoId: XzosGWLafrY +bilibiliIds: + aid: 633068913 + bvid: BV1db4y127M4 + cid: 409024056 +dashedName: python-iteration-and-modules +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +How would you iterate over and print the keys and values of a dictionary named `user`? + +## --answers-- + +```python +for key in user.items(): + print(key) +``` + +--- + +```python +for key, value in user.all(): + print(key, value) + print(value) +``` + +--- + +```python +for key, value in user.items(): + print(key, value) +``` + +--- + +```python +for key, value in user + print(key, value) +``` + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md new file mode 100644 index 00000000000..0291043e715 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md @@ -0,0 +1,59 @@ +--- +id: 5e9a093a74c4063ca6f7c162 +title: Reading Data CSV and TXT +challengeType: 11 +videoId: ViGEv0zOzUk +bilibiliIds: + aid: 505575354 + bvid: BV1tg411c7GH + cid: 409020451 +dashedName: reading-data-csv-and-txt +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +How would you import the CSV file `data.csv` and store it in a DataFrame using the Pandas module? + +## --answers-- + +```python +import pandas as pd +df = pd.csv("data.csv") +``` + +--- + +```python +import pandas as pd +df = pd.read_csv("data.csv") +``` + +--- + +```python +import pandas as pd +pd.read_csv("data.csv") +``` + +--- + +```python +import pandas as pd +df = pd.csv_reader("data.csv") +``` + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md new file mode 100644 index 00000000000..21186179430 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md @@ -0,0 +1,43 @@ +--- +id: 5e9a093a74c4063ca6f7c163 +title: Reading Data from Databases +challengeType: 11 +videoId: MtgXS1MofRw +bilibiliIds: + aid: 890546354 + bvid: BV1JP4y1h7gk + cid: 409020851 +dashedName: reading-data-from-databases +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +What method does a `Cursor` instance have and what does it allow? + +## --answers-- + +The `Cursor` instance has a `.run()` method which allows you to run SQL queries. + +--- + +The `Cursor` instance has a `.select()` method which allows you to select records. + +--- + +The `Cursor` instance has an `.execute()` method which will receive SQL parameters to run against the database. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md new file mode 100644 index 00000000000..2822287ab61 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md @@ -0,0 +1,76 @@ +--- +id: 5e9a093a74c4063ca6f7c161 +title: Reading Data Introduction +challengeType: 11 +videoId: cDnt02BcHng +bilibiliIds: + aid: 548023524 + bvid: BV1Nq4y1K7iV + cid: 409020187 +dashedName: reading-data-introduction +--- + +# --description-- + +*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.* + +More resources: + +- Notebooks on GitHub +- How to open Notebooks from GitHub using Google Colab. + +# --question-- + +## --text-- + +Given a file named `certificates.csv` with these contents: + +
+Name$Certificates$Time (in months)
+Tom$8$16
+Kris$2$5
+Ahmad$5$9
+Beau$6$12
+
+ +Fill in the blanks for the missing arguments below: + +```py +import csv + +with open(__A__, 'r') as fp: + reader = csv.reader(fp, delimiter=__B__) + next(reader) + for index, values in enumerate(reader): + name, certs_num, months_num = values + print(f"{name} earned {__C__} certificates in {months_num} months") +``` + +## --answers-- + +A: `'certificates.csv'` + +B: `'-'` + +C: `values` + +--- + +A: `'certificates.csv'` + +B: `'$'` + +C: `certs_num` + +--- + +A: `'certificates'` + +B: `'$'` + +C: `certs_num` + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md new file mode 100644 index 00000000000..d0d07e0dc72 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md @@ -0,0 +1,91 @@ +--- +id: 5e46f7f8ac417301a38fb92a +title: Medical Data Visualizer +challengeType: 10 +forumTopicId: 462368 +dashedName: medical-data-visualizer +--- + +# --description-- + +You will be working on this project with our Replit starter code. + +We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project: + +- Python for Everybody Video Course(14 hours) + +- How to Analyze Data with Python Pandas (10 hours) + +# --instructions-- + +In this project, you will visualize and make calculations from medical examination data using matplotlib, seaborn, and pandas. The dataset values were collected during medical examinations. + +## Data description + +The rows in the dataset represent patients and the columns represent information like body measurements, results from various blood tests, and lifestyle choices. You will use the dataset to explore the relationship between cardiac disease, body measurements, blood markers, and lifestyle choices. + +File name: medical_examination.csv + +| Feature | Variable Type | Variable | Value Type | +|:-------:|:------------:|:-------------:|:----------:| +| Age | Objective Feature | `age` | int (days) | +| Height | Objective Feature | `height` | int (cm) | +| Weight | Objective Feature | `weight` | float (kg) | +| Gender | Objective Feature | `gender` | categorical code | +| Systolic blood pressure | Examination Feature | `ap_hi` | int | +| Diastolic blood pressure | Examination Feature | `ap_lo` | int | +| Cholesterol | Examination Feature | `cholesterol` | 1: normal, 2: above normal, 3: well above normal | +| Glucose | Examination Feature | `gluc` | 1: normal, 2: above normal, 3: well above normal | +| Smoking | Subjective Feature | `smoke` | binary | +| Alcohol intake | Subjective Feature | `alco` | binary | +| Physical activity | Subjective Feature | `active` | binary | +| Presence or absence of cardiovascular disease | Target Variable | `cardio` | binary | + +## Tasks + +Create a chart similar to `examples/Figure_1.png`, where we show the counts of good and bad outcomes for the `cholesterol`, `gluc`, `alco`, `active`, and `smoke` variables for patients with cardio=1 and cardio=0 in different panels. + +Use the data to complete the following tasks in `medical_data_visualizer.py`: + +- Add an `overweight` column to the data. To determine if a person is overweight, first calculate their BMI by dividing their weight in kilograms by the square of their height in meters. If that value is > 25 then the person is overweight. Use the value 0 for NOT overweight and the value 1 for overweight. +- Normalize the data by making 0 always good and 1 always bad. If the value of `cholesterol` or `gluc` is 1, make the value 0. If the value is more than 1, make the value 1. +- Convert the data into long format and create a chart that shows the value counts of the categorical features using seaborn's `catplot()`. The dataset should be split by 'Cardio' so there is one chart for each `cardio` value. The chart should look like `examples/Figure_1.png`. +- Clean the data. Filter out the following patient segments that represent incorrect data: + - diastolic pressure is higher than systolic (Keep the correct data with `(df['ap_lo'] <= df['ap_hi'])`) + - height is less than the 2.5th percentile (Keep the correct data with `(df['height'] >= df['height'].quantile(0.025))`) + - height is more than the 97.5th percentile + - weight is less than the 2.5th percentile + - weight is more than the 97.5th percentile +- Create a correlation matrix using the dataset. Plot the correlation matrix using seaborn's `heatmap()`. Mask the upper triangle. The chart should look like `examples/Figure_2.png`. + +Any time a variable is set to `None`, make sure to set it to the correct code. + +Unit tests are written for you under `test_module.py`. + +## Development + +For development, you can use `main.py` to test your functions. Click the "run" button and `main.py` will run. + +## Testing + +We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button. + +## Submitting + +Copy your project's URL and submit it to freeCodeCamp. + +# --hints-- + +It should pass all Python tests. + +```js + +``` + +# --solutions-- + +```py + # Python challenges don't need solutions, + # because they would need to be tested against a full working project. + # Please check our contributing guidelines to learn more. +``` diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md new file mode 100644 index 00000000000..70478f31ad5 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md @@ -0,0 +1,61 @@ +--- +id: 5e46f802ac417301a38fb92b +title: Page View Time Series Visualizer +challengeType: 10 +forumTopicId: 462369 +dashedName: page-view-time-series-visualizer +--- + +# --description-- + +You will be working on this project with our Replit starter code. + +We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project: + +- Python for Everybody Video Course(14 hours) + +- How to Analyze Data with Python Pandas (10 hours) + +# --instructions-- + +For this project you will visualize time series data using a line chart, bar chart, and box plots. You will use Pandas, Matplotlib, and Seaborn to visualize a dataset containing the number of page views each day on the freeCodeCamp.org forum from 2016-05-09 to 2019-12-03. The data visualizations will help you understand the patterns in visits and identify yearly and monthly growth. + +Use the data to complete the following tasks: + +- Use Pandas to import the data from "fcc-forum-pageviews.csv". Set the index to the `date` column. +- Clean the data by filtering out days when the page views were in the top 2.5% of the dataset or bottom 2.5% of the dataset. +- Create a `draw_line_plot` function that uses Matplotlib to draw a line chart similar to "examples/Figure_1.png". The title should be `Daily freeCodeCamp Forum Page Views 5/2016-12/2019`. The label on the x axis should be `Date` and the label on the y axis should be `Page Views`. +- Create a `draw_bar_plot` function that draws a bar chart similar to "examples/Figure_2.png". It should show average daily page views for each month grouped by year. The legend should show month labels and have a title of `Months`. On the chart, the label on the x axis should be `Years` and the label on the y axis should be `Average Page Views`. +- Create a `draw_box_plot` function that uses Seaborn to draw two adjacent box plots similar to "examples/Figure_3.png". These box plots should show how the values are distributed within a given year or month and how it compares over time. The title of the first chart should be `Year-wise Box Plot (Trend)` and the title of the second chart should be `Month-wise Box Plot (Seasonality)`. Make sure the month labels on bottom start at `Jan` and the x and y axis are labeled correctly. The boilerplate includes commands to prepare the data. + +For each chart, make sure to use a copy of the data frame. Unit tests are written for you under `test_module.py`. + +The boilerplate also includes commands to save and return the image. + +## Development + +For development, you can use `main.py` to test your functions. Click the "run" button and `main.py` will run. + +## Testing + +We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button. + +## Submitting + +Copy your project's URL and submit it to freeCodeCamp. + +# --hints-- + +It should pass all Python tests. + +```js + +``` + +# --solutions-- + +```py + # Python challenges don't need solutions, + # because they would need to be tested against a full working project. + # Please check our contributing guidelines to learn more. +``` diff --git a/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md new file mode 100644 index 00000000000..3931fd8089a --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md @@ -0,0 +1,65 @@ +--- +id: 5e4f5c4b570f7e3a4949899f +title: Sea Level Predictor +challengeType: 10 +forumTopicId: 462370 +dashedName: sea-level-predictor +--- + +# --description-- + +You will be working on this project with our Replit starter code. + +We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project: + +- Python for Everybody Video Course(14 hours) + +- How to Analyze Data with Python Pandas (10 hours) + +# --instructions-- + +You will analyze a dataset of the global average sea level change since 1880. You will use the data to predict the sea level change through year 2050. + +Use the data to complete the following tasks: + +- Use Pandas to import the data from `epa-sea-level.csv`. +- Use matplotlib to create a scatter plot using the `Year` column as the x-axis and the `CSIRO Adjusted Sea Level` column as the y-axix. +- Use the `linregress` function from `scipy.stats` to get the slope and y-intercept of the line of best fit. Plot the line of best fit over the top of the scatter plot. Make the line go through the year 2050 to predict the sea level rise in 2050. +- Plot a new line of best fit just using the data from year 2000 through the most recent year in the dataset. Make the line also go through the year 2050 to predict the sea level rise in 2050 if the rate of rise continues as it has since the year 2000. +- The x label should be `Year`, the y label should be `Sea Level (inches)`, and the title should be `Rise in Sea Level`. + +Unit tests are written for you under `test_module.py`. + +The boilerplate also includes commands to save and return the image. + +## Development + +For development, you can use `main.py` to test your functions. Click the "run" button and `main.py` will run. + +## Testing + +We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button. + +## Submitting + +Copy your project's URL and submit it to freeCodeCamp. + +## Data Source +Global Average Absolute Sea Level Change, 1880-2014 from the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015. + + +# --hints-- + +It should pass all Python tests. + +```js + +``` + +# --solutions-- + +```py + # Python challenges don't need solutions, + # because they would need to be tested against a full working project. + # Please check our contributing guidelines to learn more. +``` diff --git a/curriculum/challenges/german/08-data-analysis-with-python/numpy/accessing-and-changing-elements,-rows,-columns.md b/curriculum/challenges/german/08-data-analysis-with-python/numpy/accessing-and-changing-elements,-rows,-columns.md new file mode 100644 index 00000000000..9964d4e18a9 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/numpy/accessing-and-changing-elements,-rows,-columns.md @@ -0,0 +1,54 @@ +--- +id: 5e9a0a8e09c5df3cc3600ed4 +title: 'Accessing and Changing Elements, Rows, Columns' +challengeType: 11 +videoId: v-7Y7koJ_N0 +bilibiliIds: + aid: 590517748 + bvid: BV1Eq4y1f7Fa + cid: 409025392 +dashedName: accessing-and-changing-elements-rows-columns +--- + +# --question-- + +## --text-- + +What code would change the values in the 3rd column of both of the following Numpy arrays to 20? + +```py +a = np.array([[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]) + +# Output: +# [[ 1 2 20 4 5] +# [ 6 7 20 9 10]] +``` + +## --answers-- + +```python +a[:, 3] = 20 +``` + +--- + +```python +a[2, :] = 20 +``` + +--- + +```python +a[:, 2] = 20 +``` + +--- + +```python +a[1, 2] = 20 +``` + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/numpy/basics-of-numpy.md b/curriculum/challenges/german/08-data-analysis-with-python/numpy/basics-of-numpy.md new file mode 100644 index 00000000000..7a4a17909b1 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/numpy/basics-of-numpy.md @@ -0,0 +1,49 @@ +--- +id: 5e9a0a8e09c5df3cc3600ed3 +title: Basics of Numpy +challengeType: 11 +videoId: f9QrZrKQMLI +bilibiliIds: + aid: 763014202 + bvid: BV1K64y1a7bu + cid: 409025169 +dashedName: basics-of-numpy +--- + +# --question-- + +## --text-- + +What will the following code print? + +```python +b = np.array([[1.0,2.0,3.0],[3.0,4.0,5.0]]) +print(b) +``` + +## --answers-- + +```python +[[1.0 2.0 3.0] +[3.0 4.0 5.0]] +``` + +--- + +```python +[[1. 2. 3.] +[3. 4. 5.]] +``` + +--- + +```python +[[1. 3.] +[2. 4.] +[3. 5.] +``` + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/numpy/copying-arrays-warning.md b/curriculum/challenges/german/08-data-analysis-with-python/numpy/copying-arrays-warning.md new file mode 100644 index 00000000000..b266bedd46e --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/numpy/copying-arrays-warning.md @@ -0,0 +1,48 @@ +--- +id: 5e9a0a8e09c5df3cc3600ed7 +title: Copying Arrays Warning +challengeType: 11 +videoId: iIoQ0_L0GvA +bilibiliIds: + aid: 633008569 + bvid: BV1Bb4y127fb + cid: 409026161 +dashedName: copying-arrays-warning +--- + +# --question-- + +## --text-- + +What is the value of `a` after running the following code? + +```py +import numpy as np + +a = np.array([1, 2, 3, 4, 5]) +b = a +b[2] = 20 +``` + +## --answers-- + +```python +[1 2 3 4 5] +``` + +--- + +```python +[1 2 20 4 5] +``` + +--- + +```python +[1 20 3 4 5] +``` + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/numpy/initialize-array-problem.md b/curriculum/challenges/german/08-data-analysis-with-python/numpy/initialize-array-problem.md new file mode 100644 index 00000000000..08984a3c7a8 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/numpy/initialize-array-problem.md @@ -0,0 +1,65 @@ +--- +id: 5e9a0a8e09c5df3cc3600ed6 +title: Initialize Array Problem +challengeType: 11 +videoId: 0jGfH8BPfOk +bilibiliIds: + aid: 763027834 + bvid: BV1w64y1a7eo + cid: 409025878 +dashedName: initialize-array-problem +--- + +# --question-- + +## --text-- + +What is another way to produce the following array? + +```py +[[0. 0. 0. 0. 0. 0. 0.] +[0. 1. 1. 1. 1. 1. 0.] +[0. 1. 1. 1. 1. 1. 0.] +[0. 1. 1. 5. 1. 1. 0.] +[0. 1. 1. 1. 1. 1. 0.] +[0. 1. 1. 1. 1. 1. 0.] +[0. 0. 0. 0. 0. 0. 0.]] +``` + +## --answers-- + +```py +output = np.ones((7, 7)) + +z = np.zeros((5, 5)) +z[2, 2] = 5 + +output[1:1, -1:-1] = z +``` + +--- + +```py +output = np.zeros((7,7)) + +z = np.ones((5, 5)) +z[2, 2] = 5 + +output[1:-1, 1:-1] = z +``` + +--- + +```py +output = np.ones((7, 7)) + +z = np.zeros((5, 5)) +z[3, 3] = 5 + +output[1:-1, 1:-1] = z +``` + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/numpy/initializing-different-arrays.md b/curriculum/challenges/german/08-data-analysis-with-python/numpy/initializing-different-arrays.md new file mode 100644 index 00000000000..debbf356d30 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/numpy/initializing-different-arrays.md @@ -0,0 +1,48 @@ +--- +id: 5e9a0a8e09c5df3cc3600ed5 +title: Initializing Different Arrays +challengeType: 11 +videoId: CEykdsKT4U4 +bilibiliIds: + aid: 718044756 + bvid: BV1MQ4y1k7BB + cid: 409025638 +dashedName: initializing-different-arrays +--- + +# --question-- + +## --text-- + +What will the following code print? + +```py +a = np.array([[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]) + +print(np.full_like(a, 100)) +``` + +## --answers-- + +```py +[[100 100 100 100 100]] +``` + +--- + +```py +[[100 100 100 100 100] +[100 100 100 100 100]] +``` + +--- + +```py +[[ 1 2 3 4 5] +[ 6 7 20 9 10]] +``` + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/numpy/loading-data-and-advanced-indexing.md b/curriculum/challenges/german/08-data-analysis-with-python/numpy/loading-data-and-advanced-indexing.md new file mode 100644 index 00000000000..4a2ec27fee7 --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/numpy/loading-data-and-advanced-indexing.md @@ -0,0 +1,60 @@ +--- +id: 5e9a0a8e09c5df3cc3600eda +title: Loading Data and Advanced Indexing +challengeType: 11 +videoId: tUdBZ7pF8Jg +bilibiliIds: + aid: 720524642 + bvid: BV1xQ4y1r7mu + cid: 409027117 +dashedName: loading-data-and-advanced-indexing +--- + +# --question-- + +## --text-- + +Given a file named `data.txt` with these contents: + +
+29,97,32,100,45
+15,88,5,75,22
+
+ +What code would produce the following array? + +```py +[29. 32. 45. 15. 5. 22.] +``` + +## --answers-- + +```py +filedata = np.genfromtxt('data.txt', delimiter=',') +output = np.any(filedata < 50) + +print(output) +``` + +--- + +```py +filedata = np.genfromtxt('data.txt', delimiter=',') +output = np.all(filedata < 50, axis=1) + +print(output) +``` + +--- + +```py +filedata = np.genfromtxt('data.txt', delimiter=',') +output = filedata[filedata < 50] + +print(output) +``` + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/08-data-analysis-with-python/numpy/what-is-numpy.md b/curriculum/challenges/german/08-data-analysis-with-python/numpy/what-is-numpy.md new file mode 100644 index 00000000000..57660ed97ad --- /dev/null +++ b/curriculum/challenges/german/08-data-analysis-with-python/numpy/what-is-numpy.md @@ -0,0 +1,38 @@ +--- +id: 5e9a0a8e09c5df3cc3600ed2 +title: What is NumPy +challengeType: 11 +videoId: 5Nwfs5Ej85Q +bilibiliIds: + aid: 293086867 + bvid: BV1Tf4y1E7QZ + cid: 409024791 +dashedName: what-is-numpy +--- + +# --question-- + +## --text-- + +Why are Numpy arrays faster than regular Python lists? + +## --answers-- + +Numpy does not perform type checking while iterating through objects. + +--- + +Numpy uses fixed types. + +--- + +Numpy uses contiguous memory. + +--- + +All of the above. + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/german/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/german/09-information-security/information-security-projects/anonymous-message-board.md new file mode 100644 index 00000000000..5045bf4efb0 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-projects/anonymous-message-board.md @@ -0,0 +1,393 @@ +--- +id: 587d824a367417b2b2512c45 +title: Anonymous Message Board +challengeType: 4 +forumTopicId: 301568 +dashedName: anonymous-message-board +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://anonymous-message-board.freecodecamp.rocks/. + +Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +1. Set `NODE_ENV` to test without quotes when ready to write tests and DB to your databases connection string (in `.env`) +2. Recommended to create controllers/handlers and handle routing in `routes/api.js` +3. You will add any security features to `server.js` + +Write the following tests in `tests/2_functional-tests.js`: + +- Creating a new thread: POST request to `/api/threads/{board}` +- Viewing the 10 most recent threads with 3 replies each: GET request to `/api/threads/{board}` +- Deleting a thread with the incorrect password: DELETE request to `/api/threads/{board}` with an invalid `delete_password` +- Deleting a thread with the correct password: DELETE request to `/api/threads/{board}` with a valid `delete_password` +- Reporting a thread: PUT request to `/api/threads/{board}` +- Creating a new reply: POST request to `/api/replies/{board}` +- Viewing a single thread with all replies: GET request to `/api/replies/{board}` +- Deleting a reply with the incorrect password: DELETE request to `/api/replies/{board}` with an invalid `delete_password` +- Deleting a reply with the correct password: DELETE request to `/api/replies/{board}` with a valid `delete_password` +- Reporting a reply: PUT request to `/api/replies/{board}` + +# --hints-- + +You can provide your own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/anonymous-message-board\.freecodecamp\.rocks/.test( + getUserInput('url') + ) + ); +}; +``` + +Only allow your site to be loaded in an iFrame on your own pages. + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.isTrue(parsed.headers['x-frame-options']?.includes('SAMEORIGIN')); +}; +``` + +Do not allow DNS prefetching. + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.isTrue(parsed.headers['x-dns-prefetch-control']?.includes('off')); +}; +``` + +Only allow your site to send the referrer for your own pages. + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.isTrue(parsed.headers['referrer-policy']?.includes('same-origin')); +}; +``` + +You can send a POST request to `/api/threads/{board}` with form data including `text` and `delete_password`. The saved database record will have at least the fields `_id`, `text`, `created_on`(date & time), `bumped_on`(date & time, starts same as `created_on`), `reported` (boolean), `delete_password`, & `replies` (array). + +```js +async (getUserInput) => { + const date = new Date(); + const text = `fcc_test_${date}`; + const deletePassword = 'delete_me'; + const data = { text, delete_password: deletePassword }; + const url = getUserInput('url'); + const res = await fetch(url + '/api/threads/fcc_test', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + if (res.ok) { + const checkData = await fetch(url + '/api/threads/fcc_test'); + const parsed = await checkData.json(); + try { + assert.equal(parsed[0].text, text); + assert.isNotNull(parsed[0]._id); + assert.equal(new Date(parsed[0].created_on).toDateString(), date.toDateString()); + assert.equal(parsed[0].bumped_on, parsed[0].created_on); + assert.isArray(parsed[0].replies); + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can send a POST request to `/api/replies/{board}` with form data including `text`, `delete_password`, & `thread_id`. This will update the `bumped_on` date to the comment's date. In the thread's `replies` array, an object will be saved with at least the properties `_id`, `text`, `created_on`, `delete_password`, & `reported`. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const body = await fetch(url + '/api/threads/fcc_test'); + const thread = await body.json(); + + const date = new Date(); + const text = `fcc_test_reply_${date}`; + const delete_password = 'delete_me'; + const thread_id = thread[0]._id; + const replyCount = thread[0].replies.length; + + const data = { text, delete_password, thread_id }; + const res = await fetch(url + '/api/replies/fcc_test', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + if (res.ok) { + const checkData = await fetch(`${url}/api/replies/fcc_test?thread_id=${thread_id}`); + const parsed = await checkData.json(); + try { + assert.equal(parsed.replies.length, replyCount + 1); + assert.equal(parsed.replies[0].text, text); + assert.equal(parsed._id, thread_id); + assert.equal(parsed.bumped_on, parsed.replies[0].created_on); + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can send a GET request to `/api/threads/{board}`. Returned will be an array of the most recent 10 bumped threads on the board with only the most recent 3 replies for each. The `reported` and `delete_password` fields will not be sent to the client. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + const res = await fetch(url + '/api/threads/fcc_test'); + + if (res.ok) { + const threads = await res.json(); + try { + assert.equal(res.status, 200); + assert.isAtMost(threads.length, 10); + for (let i = 0; i < threads.length; i++) { + assert.containsAllKeys(threads[i], ["_id", "text", "created_on", "bumped_on", "replies"]); + assert.isAtMost(threads[i].replies.length, 3); + assert.notExists(threads[i].delete_password); + assert.notExists(threads[i].reported); + for (let j = 0; j < threads[i].replies.length; j++) { + assert.notExists(threads[i].replies[j].delete_password); + assert.notExists(threads[i].replies[j].reported); + } + } + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can send a GET request to `/api/replies/{board}?thread_id={thread_id}`. Returned will be the entire thread with all its replies, also excluding the same fields from the client as the previous test. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + let res = await fetch(url + '/api/threads/fcc_test'); + const threads = await res.json(); + const thread_id = threads[0]._id; + res = await fetch(`${url}/api/replies/fcc_test?thread_id=${thread_id}`); + + if (res.ok) { + const thread = await res.json(); + try { + assert.equal(res.status, 200); + assert.isObject(thread); + assert.containsAllKeys(thread, ["_id", "text", "created_on", "bumped_on", "replies"]); + assert.isArray(thread.replies); + assert.notExists(thread.delete_password); + assert.notExists(thread.reported); + for (let i = 0; i < thread.replies.length; i++) { + assert.notExists(thread.replies[i].delete_password); + assert.notExists(thread.replies[i].reported); + } + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can send a DELETE request to `/api/threads/{board}` and pass along the `thread_id` & `delete_password` to delete the thread. Returned will be the string `incorrect password` or `success`. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + let res = await fetch(url + '/api/threads/fcc_test'); + const threads = await res.json(); + const thread_id = threads[0]._id; + let data = { thread_id, delete_password: "wrong_password" }; + const res_invalid = await fetch(url + '/api/threads/fcc_test', { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + data = { thread_id, delete_password: "delete_me" }; + res = await fetch(url + '/api/threads/fcc_test', { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + + if (res.ok) { + const deleted = await res.text(); + const not_deleted = await res_invalid.text(); + try { + assert.equal(res.status, 200); + assert.equal(deleted, "success"); + assert.equal(not_deleted, "incorrect password"); + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can send a DELETE request to `/api/replies/{board}` and pass along the `thread_id`, `reply_id`, & `delete_password`. Returned will be the string `incorrect password` or `success`. On success, the text of the `reply_id` will be changed to `[deleted]`. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + + const thread_data = { + text: "fcc_test_thread", + delete_password: "delete_me", + }; + await fetch(`${url}/api/threads/fcc_test`, { + method: "POST", + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(thread_data) + }); + let res = await fetch(`${url}/api/threads/fcc_test`); + let threads = await res.json(); + const thread_id = threads[0]._id; + + const reply_data = { thread_id, text: "fcc_test_reply", delete_password: "delete_me" }; + await fetch(`${url}/api/replies/fcc_test`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(reply_data) + }); + res = await fetch(`${url}/api/threads/fcc_test`); + threads = await res.json(); + const reply_id = threads[0].replies[0]._id; + + const data = { thread_id, reply_id, delete_password: "delete_me" }; + res = await fetch(url + '/api/replies/fcc_test', { + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + + if (res.ok) { + const deleted = await res.text(); + try { + assert.equal(res.status, 200); + assert.equal(deleted, "success"); + res = await fetch(`${url}/api/replies/fcc_test?thread_id=${thread_id}`); + const thread = await res.json(); + assert.equal(thread._id, thread_id); + assert.equal(thread.replies[0]._id, reply_id); + assert.equal(thread.replies[0].text, "[deleted]"); + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can send a PUT request to `/api/threads/{board}` and pass along the `thread_id`. Returned will be the string `reported`. The `reported` value of the `thread_id` will be changed to `true`. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + + let res = await fetch(`${url}/api/threads/fcc_test`); + const threads = await res.json(); + const report_id = threads[0]._id; + const data = { report_id }; + + res = await fetch(`${url}/api/threads/fcc_test`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + + if (res.ok) { + const reported = await res.text(); + try { + assert.equal(res.status, 200); + assert.equal(reported, "reported"); + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +You can send a PUT request to `/api/replies/{board}` and pass along the `thread_id` & `reply_id`. Returned will be the string `reported`. The `reported` value of the `reply_id` will be changed to `true`. + +```js +async (getUserInput) => { + const url = getUserInput('url'); + + let res = await fetch(`${url}/api/threads/fcc_test`); + const threads = await res.json(); + const thread_id = threads[0]._id; + const reply_id = threads[0].replies[0]._id; + const data = { thread_id, reply_id }; + + res = await fetch(`${url}/api/replies/fcc_test`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + + if (res.ok) { + const reported = await res.text(); + try { + assert.equal(res.status, 200); + assert.equal(reported, "reported"); + } catch (err) { + throw new Error(err.responseText || err.message); + } + } else { + throw new Error(`${res.status} ${res.statusText}`); + } +}; +``` + +All 10 functional tests are complete and passing. + +```js +async (getUserInput) => { + const tests = await fetch(getUserInput('url') + '/_api/get-tests'); + const parsed = await tests.json(); + assert.isTrue(parsed.length >= 10); + parsed.forEach((test) => { + assert.equal(test.state, 'passed'); + assert.isAtLeast(test.assertions.length, 1); + }); +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/german/09-information-security/information-security-projects/port-scanner.md new file mode 100644 index 00000000000..4f5d0456333 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-projects/port-scanner.md @@ -0,0 +1,97 @@ +--- +id: 5e46f979ac417301a38fb932 +title: Port Scanner +challengeType: 10 +forumTopicId: 462372 +helpCategory: Python +dashedName: port-scanner +--- + +# --description-- + +You will be working on this project with our Replit starter code. + +We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project: + +- Python for Everybody Video Course (14 hours) + +- Learn Python Basics in Depth (4 hours) + +- Intermediate Python Course (6 hours) + +# --instructions-- + +Create a port scanner using Python. + +In the `port_scanner.py` file, create a function called `get_open_ports` that takes a `target` argument and a `port_range` argument. `target` can be a URL or IP address. `port_range` is a list of two numbers indicating the first and last numbers of the range of ports to check. + +Here are examples of how the function may be called: + +```py +get_open_ports("209.216.230.240", [440, 445]) +get_open_ports("www.stackoverflow.com", [79, 82]) +``` + +The function should return a list of open ports in the given range. + +The `get_open_ports` function should also take an optional third argument of `True` to indicate "Verbose" mode. If this is set to true, the function should return a descriptive string instead of a list of ports. + +Here is the format of the string that should be returned in verbose mode (text inside `{}` indicates the information that should appear): + +```bash +Open ports for {URL} ({IP address}) +PORT SERVICE +{port} {service name} +{port} {service name} +``` + +You can use the dictionary in `common_ports.py` to get the correct service name for each port. + +For example, if the function is called like this: + +```py +port_scanner.get_open_ports("scanme.nmap.org", [20, 80], True) +``` + +It should return the following: + +```bash +Open ports for scanme.nmap.org (45.33.32.156) +PORT SERVICE +22 ssh +80 http +``` + +Make sure to include proper spacing and new line characters. + +If the URL passed into the `get_open_ports` function is invalid, the function should return the string: "Error: Invalid hostname". + +If the IP address passed into the `get_open_ports` function is invalid, the function should return the string: "Error: Invalid IP address". + +## Development + +Write your code in `port_scanner.py`. For development, you can use `main.py` to test your code. Click the "run" button and `main.py` will run. + +## Testing + +The unit tests for this project are in `test_module.py`. We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button. + +## Submitting + +Copy your project's URL and submit it to freeCodeCamp. + +# --hints-- + +It should pass all Python tests. + +```js + +``` + +# --solutions-- + +```py + # Python challenges don't need solutions, + # because they would need to be tested against a full working project. + # Please check our contributing guidelines to learn more. +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/german/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md new file mode 100644 index 00000000000..11050099d93 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -0,0 +1,186 @@ +--- +id: 5e601c775ac9d0ecd8b94aff +title: Secure Real Time Multiplayer Game +challengeType: 4 +forumTopicId: 462375 +dashedName: secure-real-time-multiplayer-game +--- + +# --description-- + +Develop a 2D real time multiplayer game using the HTML Canvas API and Socket.io that is functionally similar to this: https://secure-real-time-multiplayer-game.freecodecamp.rocks/. Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +Create a secure multiplayer game in which each player can move their avatar, there is at least one collectible item, and the rank of the players is calculated based on their score. + +For details consult the tests below. + +Make sure that your game is secure! Include these security measures: + +- The client should not be able to guess/sniff the MIME type +- Prevent XSS attacks +- Do not cache anything from the website in the client +- The headers say that the site is powered by `PHP 7.4.3` + +**Note**: `helmet@^3.21.3` is needed for the user stories. This means you will need to use the previous version of Helmet's docs, for information on how to achieve the user stories. + +# --hints-- + +You can provide your own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/secure-real-time-multiplayer-game\.freecodecamp\.rocks/.test( + getUserInput('url') + ) + ); +}; +``` + +Multiple players can connect to a server and play. + +```js + +``` + +Each player has an avatar. + +```js + +``` + +Each player is represented by an object created by the `Player` class in `Player.mjs`. + +```js + +``` + +At a minimum, each player object should contain a unique `id`, a `score`, and `x` and `y` coordinates representing the player's current position. + +```js + +``` + +The game has at least one type of collectible item. Complete the `Collectible` class in `Collectible.mjs` to implement this. + +```js + +``` + +At a minimum, each collectible item object created by the `Collectible` class should contain a unique `id`, a `value`, and `x` and `y` coordinates representing the item's current position. + +```js + +``` + +Players can use the WASD and/or arrow keys to move their avatar. Complete the `movePlayer` method in `Player.mjs` to implement this. + +```js + +``` + +The `movePlayer` method should accept two arguments: a string of "up", "down", "left", or "right", and a number for the amount of pixels the player's position should change. `movePlayer` should adjust the `x` and `y` coordinates of the player object it's called from. + +```js + +``` + +The player's score should be used to calculate their rank among the other players. Complete the `calculateRank` method in the `Player` class to implement this. + +```js + +``` + +The `calculateRank` method should accept an array of objects representing all connected players and return the string `Rank: currentRanking/totalPlayers`. For example, in a game with two players, if Player A has a score of 3 and Player B has a score of 5, `calculateRank` for Player A should return `Rank: 2/2`. + +```js + +``` + +Players can collide with a collectible item. Complete the `collision` method in `Player.mjs` to implement this. + +```js + +``` + +The `collision` method should accept a collectible item's object as an argument. If the player's avatar intersects with the item, the `collision` method should return `true`. + +```js + +``` + +All players are kept in sync. + +```js + +``` + +Players can disconnect from the game at any time. + +```js + +``` + +Prevent the client from trying to guess / sniff the MIME type. + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['x-content-type-options'], 'nosniff'); +}; +``` + +Prevent cross-site scripting (XSS) attacks. + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['x-xss-protection'], '1; mode=block'); +}; +``` + +Nothing from the website is cached in the client. + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['surrogate-control'], 'no-store'); + assert.equal( + parsed.headers['cache-control'], + 'no-store, no-cache, must-revalidate, proxy-revalidate' + ); + assert.equal(parsed.headers['pragma'], 'no-cache'); + assert.equal(parsed.headers['expires'], '0'); +}; +``` + +The headers say that the site is powered by "PHP 7.4.3" even though it isn't (as a security measure). + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.equal(parsed.headers['x-powered-by'], 'PHP 7.4.3'); +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/german/09-information-security/information-security-projects/sha-1-password-cracker.md new file mode 100644 index 00000000000..c924b8d4cbd --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-projects/sha-1-password-cracker.md @@ -0,0 +1,74 @@ +--- +id: 5e46f983ac417301a38fb933 +title: SHA-1 Password Cracker +challengeType: 10 +forumTopicId: 462374 +helpCategory: Python +dashedName: sha-1-password-cracker +--- + +# --description-- + +You will be working on this project with our Replit starter code. + +We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project: + +- Python for Everybody Video Course (14 hours) + +- Learn Python Basics in Depth (4 hours) + +- Intermediate Python Course (6 hours) + +# --instructions-- + +Passwords should never be stored in plain text. They should be stored as hashes, just in case the password list is discovered. However, not all hashes are created equal. + +For this project you will learn about the importance of good security by creating a password cracker to figure out passwords that were hashed using SHA-1. + +Create a function that takes in a SHA-1 hash of a password and returns the password if it is one of the top 10,000 passwords used. If the SHA-1 hash is NOT of a password in the database, return "PASSWORD NOT IN DATABASE". + +The function should hash each password from `top-10000-passwords.txt` and compare it to the hash passed into the function. + +The function should take an optional second argument named `use_salts`. If set to true, each salt string from the file `known-salts.txt` should be appended AND prepended to each password from `top-10000-passwords.txt` before hashing and before comparing it to the hash passed into the function. + +Here are some hashed passwords to test the function with: + +- `b305921a3723cd5d70a375cd21a61e60aabb84ec` should return "sammy123" +- `c7ab388a5ebefbf4d550652f1eb4d833e5316e3e` should return "abacab" +- `5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8` should return "password" + +Here are some hashed passwords to test the function with when `use_salts` is set to `True`: + +- `53d8b3dc9d39f0184144674e310185e41a87ffd5` should return "superman" +- `da5a4e8cf89539e66097acd2f8af128acae2f8ae` should return "q1w2e3r4t5" +- `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` should return "bubbles1" + +The `hashlib` library has been imported for you. You should consider using it in your code. Learn more about "hashlib" here. + +## Development + +Write your code in `password_cracker.py`. For development, you can use `main.py` to test your code. Click the "run" button and `main.py` will run. + +## Testing + +The unit tests for this project are in `test_module.py`. We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button. + +## Submitting + +Copy your project's URL and submit it to freeCodeCamp. + +# --hints-- + +It should pass all Python tests. + +```js + +``` + +# --solutions-- + +```py + # Python challenges don't need solutions, + # because they would need to be tested against a full working project. + # Please check our contributing guidelines to learn more. +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/german/09-information-security/information-security-projects/stock-price-checker.md new file mode 100644 index 00000000000..dc605701836 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-projects/stock-price-checker.md @@ -0,0 +1,136 @@ +--- +id: 587d824a367417b2b2512c44 +title: Stock Price Checker +challengeType: 4 +forumTopicId: 301572 +dashedName: stock-price-checker +--- + +# --description-- + +Build a full stack JavaScript app that is functionally similar to this: https://stock-price-checker.freecodecamp.rocks/. + +Since all reliable stock price APIs require an API key, we've built a workaround. Use https://stock-price-checker-proxy.freecodecamp.rocks/ to get up-to-date stock price information without needing to sign up for your own key. + +Working on this project will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete your project locally. +- Use our Replit starter project to complete your project. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field. + +# --instructions-- + +1. SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string +2. Complete the project in `routes/api.js` or by creating a handler/controller +3. You will add any security features to `server.js` +4. You will create all of the functional tests in `tests/2_functional-tests.js` + +**Note** Privacy Considerations: Due to the requirement that only 1 like per IP should be accepted, you will have to save IP addresses. It is important to remain compliant with data privacy laws such as the General Data Protection Regulation. One option is to get permission to save the user's data, but it is much simpler to anonymize it. For this challenge, remember to anonymize IP addresses before saving them to the database. If you need ideas on how to do this, you may choose to hash the data, truncate it, or set part of the IP address to 0. + +Write the following tests in `tests/2_functional-tests.js`: + +- Viewing one stock: GET request to `/api/stock-prices/` +- Viewing one stock and liking it: GET request to `/api/stock-prices/` +- Viewing the same stock and liking it again: GET request to `/api/stock-prices/` +- Viewing two stocks: GET request to `/api/stock-prices/` +- Viewing two stocks and liking them: GET request to `/api/stock-prices/` + +# --hints-- + +You can provide your own project, not the example URL. + +```js +(getUserInput) => { + assert( + !/.*\/stock-price-checker\.freecodecamp\.rocks/.test(getUserInput('url')) + ); +}; +``` + +You should set the content security policies to only allow loading of scripts and CSS from your server. + +```js +async (getUserInput) => { + const data = await fetch(getUserInput('url') + '/_api/app-info'); + const parsed = await data.json(); + assert.isTrue( + parsed.headers['content-security-policy'].includes("script-src 'self'") + ); + assert.isTrue( + parsed.headers['content-security-policy'].includes("style-src 'self'") + ); +}; +``` + +You can send a `GET` request to `/api/stock-prices`, passing a NASDAQ stock symbol to a `stock` query parameter. The returned object will contain a property named `stockData`. + +```js +async (getUserInput) => { + const data = await fetch( + getUserInput('url') + '/api/stock-prices?stock=GOOG' + ); + const parsed = await data.json(); + assert.property(parsed, 'stockData'); +}; +``` + +The `stockData` property includes the `stock` symbol as a string, the `price` as a number, and `likes` as a number. + +```js +async (getUserInput) => { + const data = await fetch( + getUserInput('url') + '/api/stock-prices?stock=GOOG' + ); + const parsed = await data.json(); + const ticker = parsed.stockData; + assert.typeOf(ticker.price, 'number'); + assert.typeOf(ticker.likes, 'number'); + assert.typeOf(ticker.stock, 'string'); +}; +``` + +You can also pass along a `like` field as `true` (boolean) to have your like added to the stock(s). Only 1 like per IP should be accepted. + +```js + +``` + +If you pass along 2 stocks, the returned value will be an array with information about both stocks. Instead of `likes`, it will display `rel_likes` (the difference between the likes on both stocks) for both `stockData` objects. + +```js +async (getUserInput) => { + const data = await fetch( + getUserInput('url') + '/api/stock-prices?stock=GOOG&stock=MSFT' + ); + const parsed = await data.json(); + const ticker = parsed.stockData; + assert.typeOf(ticker, 'array'); + assert.property(ticker[0], 'rel_likes'); + assert.property(ticker[1], 'rel_likes'); +}; +``` + +All 5 functional tests are complete and passing. + +```js +async (getUserInput) => { + const tests = await fetch(getUserInput('url') + '/_api/get-tests'); + const parsed = await tests.json(); + assert.isTrue(parsed.length >= 5); + parsed.forEach((test) => { + assert.equal(test.state, 'passed'); + }); +}; +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md new file mode 100644 index 00000000000..d793c160a42 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md @@ -0,0 +1,63 @@ +--- +id: 587d8248367417b2b2512c3c +title: Ask Browsers to Access Your Site via HTTPS Only with helmet.hsts() +challengeType: 2 +forumTopicId: 301573 +dashedName: ask-browsers-to-access-your-site-via-https-only-with-helmet-hsts +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +HTTP Strict Transport Security (HSTS) is a web security policy which helps to protect websites against protocol downgrade attacks and cookie hijacking. If your website can be accessed via HTTPS you can ask user’s browsers to avoid using insecure HTTP. By setting the header Strict-Transport-Security, you tell the browsers to use HTTPS for the future requests in a specified amount of time. This will work for the requests coming after the initial request. + +# --instructions-- + +Configure `helmet.hsts()` to use HTTPS for the next 90 days. Pass the config object `{maxAge: timeInSeconds, force: true}`. You can create a variable `ninetyDaysInSeconds = 90*24*60*60;` to use for the `timeInSeconds`. Replit already has hsts enabled. To override its settings you need to set the field "force" to true in the config object. We will intercept and restore the Replit header, after inspecting it for testing. + +Note: Configuring HTTPS on a custom website requires the acquisition of a domain, and a SSL/TLS Certificate. + +# --hints-- + +helmet.hsts() middleware should be mounted correctly + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/app-info').then( + (data) => { + assert.include(data.appStack, 'hsts'); + assert.property(data.headers, 'strict-transport-security'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +maxAge should be equal to 7776000 s (90 days) + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/app-info').then( + (data) => { + assert.match( + data.headers['strict-transport-security'], + /^max-age=7776000;?/ + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md new file mode 100644 index 00000000000..bdfe0a5f4e0 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md @@ -0,0 +1,42 @@ +--- +id: 587d8248367417b2b2512c3a +title: Avoid Inferring the Response MIME Type with helmet.noSniff() +challengeType: 2 +forumTopicId: 301574 +dashedName: avoid-inferring-the-response-mime-type-with-helmet-nosniff +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. Browsers can use content or MIME sniffing to override response `Content-Type` headers to guess and process the data using an implicit content type. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to `nosniff`, instructing the browser to not bypass the provided `Content-Type`. + +# --instructions-- + +Use the `helmet.noSniff()` method on your server. + +# --hints-- + +helmet.noSniff() middleware should be mounted correctly + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/app-info').then( + (data) => { + assert.include(data.appStack, 'nosniff'); + assert.equal(data.headers['x-content-type-options'], 'nosniff'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md new file mode 100644 index 00000000000..df5a2738dbb --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md @@ -0,0 +1,50 @@ +--- +id: 587d8249367417b2b2512c40 +title: Configure Helmet Using the ‘parent’ helmet() Middleware +challengeType: 2 +forumTopicId: 301575 +dashedName: configure-helmet-using-the-parent-helmet-middleware +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +`app.use(helmet())` will automatically include all the middleware introduced above, except `noCache()`, and `contentSecurityPolicy()`, but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object. + +**Example:** + +```js +app.use(helmet({ + frameguard: { // configure + action: 'deny' + }, + contentSecurityPolicy: { // enable and configure + directives: { + defaultSrc: ["'self'"], + styleSrc: ['style.com'], + } + }, + dnsPrefetchControl: false // disable +})) +``` + +We introduced each middleware separately for teaching purposes and for ease of testing. Using the ‘parent’ `helmet()` middleware is easy to implement in a real project. + +# --hints-- + +no tests - it's a descriptive challenge + +```js +assert(true); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md new file mode 100644 index 00000000000..e41d8a3d310 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md @@ -0,0 +1,47 @@ +--- +id: 587d8249367417b2b2512c3e +title: Disable Client-Side Caching with helmet.noCache() +challengeType: 2 +forumTopicId: 301576 +dashedName: disable-client-side-caching-with-helmet-nocache +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +If you are releasing an update for your website, and you want the users to always download the newer version, you can (try to) disable caching on client’s browser. It can be useful in development too. Caching has performance benefits, which you will lose, so only use this option when there is a real need. + +# --instructions-- + +Use the `helmet.noCache()` method on your server. + +# --hints-- + +helmet.noCache() middleware should be mounted correctly + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/app-info').then( + (data) => { + assert.include(data.appStack, 'nocache'); + assert.equal( + data.headers['cache-control'], + 'no-store, no-cache, must-revalidate, proxy-revalidate' + ); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md new file mode 100644 index 00000000000..ec268aa846c --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md @@ -0,0 +1,44 @@ +--- +id: 587d8248367417b2b2512c3d +title: Disable DNS Prefetching with helmet.dnsPrefetchControl() +challengeType: 2 +forumTopicId: 301577 +dashedName: disable-dns-prefetching-with-helmet-dnsprefetchcontrol +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +To improve performance, most browsers prefetch DNS records for the links in a page. In that way the destination ip is already known when the user clicks on a link. This may lead to over-use of the DNS service (if you own a big website, visited by millions people…), privacy issues (one eavesdropper could infer that you are on a certain page), or page statistics alteration (some links may appear visited even if they are not). If you have high security needs you can disable DNS prefetching, at the cost of a performance penalty. + +# --instructions-- + +Use the `helmet.dnsPrefetchControl()` method on your server. + +# --hints-- + +helmet.dnsPrefetchControl() middleware should be mounted correctly + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/app-info').then( + (data) => { + assert.include(data.appStack, 'dnsPrefetchControl'); + assert.equal(data.headers['x-dns-prefetch-control'], 'off'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md new file mode 100644 index 00000000000..d033c9f73c0 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md @@ -0,0 +1,81 @@ +--- +id: 58a25bcff9fc0f352b528e7d +title: Hash and Compare Passwords Asynchronously +challengeType: 2 +forumTopicId: 301578 +dashedName: hash-and-compare-passwords-asynchronously +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +As hashing is designed to be computationally intensive, it is recommended to do so asynchronously on your server as to avoid blocking incoming connections while you hash. All you have to do to hash a password asynchronous is call + +```js +bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => { + /*Store hash in your db*/ +}); +``` + +# --instructions-- + +Add this hashing function to your server (we've already defined the variables used in the function for you to use) and log it to the console for you to see! At this point you would normally save the hash to your database. + +Now when you need to figure out if a new input is the same data as the hash you would just use the compare function. + +```js +bcrypt.compare(myPlaintextPassword, hash, (err, res) => { + /*res == true or false*/ +}); +``` + +Add this into your existing hash function (since you need to wait for the hash to complete before calling the compare function) after you log the completed hash and log 'res' to the console within the compare. You should see in the console a hash then 'true' is printed! If you change 'myPlaintextPassword' in the compare function to 'someOtherPlaintextPassword' then it should say false. + +```js +bcrypt.hash('passw0rd!', 13, (err, hash) => { + console.log(hash); + //$2a$12$Y.PHPE15wR25qrrtgGkiYe2sXo98cjuMCG1YwSI5rJW1DSJp0gEYS + bcrypt.compare('passw0rd!', hash, (err, res) => { + console.log(res); //true + }); +}); + +``` + +Submit your page when you think you've got it right. + +# --hints-- + +Async hash should be generated and correctly compared. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /START_ASYNC[^]*bcrypt.hash.*myPlaintextPassword( |),( |)saltRounds( |),( |).*err( |),( |)hash[^]*END_ASYNC/gi, + 'You should call bcrypt.hash on myPlaintextPassword and saltRounds and handle err and hash as a result in the callback' + ); + assert.match( + data, + /START_ASYNC[^]*bcrypt.hash[^]*bcrypt.compare.*myPlaintextPassword( |),( |)hash( |),( |).*err( |),( |)res[^]*}[^]*}[^]*END_ASYNC/gi, + 'Nested within the hash function should be the compare function comparing myPlaintextPassword to hash' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md new file mode 100644 index 00000000000..64fc17c3a70 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md @@ -0,0 +1,66 @@ +--- +id: 58a25bcff9fc0f352b528e7e +title: Hash and Compare Passwords Synchronously +challengeType: 2 +forumTopicId: 301579 +dashedName: hash-and-compare-passwords-synchronously +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +Hashing synchronously is just as easy to do but can cause lag if using it server side with a high cost or with hashing done very often. Hashing with this method is as easy as calling + +```js +var hash = bcrypt.hashSync(myPlaintextPassword, saltRounds); +``` + +Add this method of hashing to your code and then log the result to the console. Again, the variables used are already defined in the server so you won't need to adjust them. You may notice even though you are hashing the same password as in the async function, the result in the console is different- this is due to the salt being randomly generated each time as seen by the first 22 characters in the third string of the hash. Now to compare a password input with the new sync hash, you would use the compareSync method: + +```js +var result = bcrypt.compareSync(myPlaintextPassword, hash); +``` + +with the result being a boolean true or false. + +# --instructions-- + +Add the function in and log the result to the console to see it working. + +Submit your page when you think you've got it right. + +# --hints-- + +Sync hash should be generated and correctly compared. + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/server.js').then( + (data) => { + assert.match( + data, + /START_SYNC[^]*hash.*=.*bcrypt.hashSync.*myPlaintextPassword( |),( |)saltRounds[^]*END_SYNC/gi, + 'You should call bcrypt.hashSync on myPlaintextPassword with saltRounds' + ); + assert.match( + data, + /START_SYNC[^]*result.*=.*bcrypt.compareSync.*myPlaintextPassword( |),( |)hash[^]*END_SYNC/gi, + 'You should call bcrypt.compareSync on myPlaintextPassword with the hash generated in the last line' + ); + }, + (xhr) => { + throw new Error(xhr.statusText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md new file mode 100644 index 00000000000..c1cd789591e --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md @@ -0,0 +1,40 @@ +--- +id: 587d8247367417b2b2512c37 +title: Hide Potentially Dangerous Information Using helmet.hidePoweredBy() +challengeType: 2 +forumTopicId: 301580 +dashedName: hide-potentially-dangerous-information-using-helmet-hidepoweredby +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. `X-Powered-By: Express` is sent in every request coming from Express by default. Use the `helmet.hidePoweredBy()` middleware to remove the X-Powered-By header. + +# --hints-- + +helmet.hidePoweredBy() middleware should be mounted correctly + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/app-info').then( + (data) => { + assert.include(data.appStack, 'hidePoweredBy'); + assert.notEqual(data.headers['x-powered-by'], 'Express'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md new file mode 100644 index 00000000000..14d946d6414 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -0,0 +1,53 @@ +--- +id: 587d8247367417b2b2512c36 +title: Install and Require Helmet +challengeType: 2 +forumTopicId: 301581 +dashedName: install-and-require-helmet +--- + +# --description-- + +Working on these challenges will involve you writing your code using one of the following methods: + +- Clone this GitHub repo and complete these challenges locally. +- Use our Replit starter project to complete these challenges. +- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo. + +When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. + +Helmet helps you secure your Express apps by setting various HTTP headers. + +# --instructions-- + +All your code for these lessons goes in the `myApp.js` file between the lines of code we have started you off with. Do not change or delete the code we have added for you. + +Helmet version `3.21.3` has already been installed, so require it as `helmet` in `myApp.js`. + +# --hints-- + +`helmet` version `3.21.3` should be in `package.json` + +```js +(getUserInput) => + $.get(getUserInput('url') + '/_api/package.json').then( + (data) => { + const packJson = JSON.parse(data); + const helmet = packJson.dependencies.helmet; + assert(helmet === '3.21.3' || helmet === '^3.21.3'); + }, + (xhr) => { + throw new Error(xhr.responseText); + } + ); +``` + +# --solutions-- + +```js +/** + Backend challenges don't need solutions, + because they would need to be tested against a full working project. + Please check our contributing guidelines to learn more. +*/ +``` diff --git a/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md new file mode 100644 index 00000000000..6b032da9b70 --- /dev/null +++ b/curriculum/challenges/german/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md @@ -0,0 +1,64 @@ +--- +id: 587d8247367417b2b2512c38 +title: Mitigate the Risk of Clickjacking with helmet.frameguard() +challengeType: 2 +forumTopicId: 301582 +dashedName: mitigate-the-risk-of-clickjacking-with-helmet-frameguard +--- + +# --description-- + +As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. + +Your page could be put in a `` or `